:root{
  --paper:#f3f1ed; --paper2:#ebe8e3; --wall:#d9d6d1; --line:#d8d4cd; --ink:#1b1b1b; --ink2:#55534f; --mute:#8d8a84;
  --denim:#4f6f9f; --denim-soft:#cfdbea; --butter:#f3e48a; --red:#c8382f; --rinkblue:#2f5fb3;
  --serif:'Fraunces',Georgia,serif; --hand:'Caveat',cursive; --mono:'Space Mono',ui-monospace,monospace; --sans:'Inter',system-ui,sans-serif; --led:'VT323',monospace;
  --r:4px; --shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.07);
  --pad:clamp(18px,4.5vw,56px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
.boot{height:100vh;display:grid;place-items:center;font:700 22px var(--serif)}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;font-size:10.5px}
.hand{font-family:var(--hand)}
.wrap{padding-left:var(--pad);padding-right:var(--pad);max-width:1440px;margin:0 auto}
.btn{display:inline-flex;align-items:center;gap:10px;border:0;background:var(--ink);color:var(--paper);padding:15px 22px;border-radius:2px;font:700 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);padding:15px 4px;border-bottom:1px solid var(--ink);border-radius:0}
.btn.light{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.btn[disabled]{opacity:.35;pointer-events:none}
.link{font:700 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}

/* header */
.hdr{position:sticky;top:0;z-index:40;background:rgba(243,241,237,.88);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:58px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.logo .arr{font-size:14px}
.logo i{font-style:normal;color:var(--mute)}
.nav{display:flex;gap:30px}
.nav a{font:400 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--ink2);padding:6px 0;border-bottom:1px solid transparent}
.nav a.on,.nav a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.filelink{font:700 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid;white-space:nowrap}
.burger{display:none;border:0;background:none;width:40px;height:40px;margin-right:-8px}
.burger span{display:block;width:20px;height:1.5px;background:var(--ink);margin:5px auto;transition:.2s}
.menu{position:fixed;inset:58px 0 0;background:var(--paper);z-index:39;padding:28px var(--pad);display:none;flex-direction:column}
.menu.open{display:flex}
.menu a{font:800 34px/1.25 var(--serif);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--line)}
.menu a small{font:400 10px var(--mono);letter-spacing:.2em;color:var(--mute);margin-right:12px;vertical-align:middle}
.menu .hand{font-size:24px;color:var(--ink2);margin-top:auto}
@media (max-width:900px){.nav,.hdr .filelink{display:none}.burger{display:block}}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);min-height:calc(100vh - 58px);max-height:900px}
.hero-text{position:relative;padding:clamp(40px,7vw,96px) var(--pad) 48px calc(var(--pad) + 34px);display:flex;flex-direction:column;justify-content:center}
.spiral{position:absolute;left:8px;top:18px;bottom:18px;width:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='22'%3E%3Ccircle cx='21' cy='11' r='2.6' fill='%23c9c5be'/%3E%3Cpath d='M21 11 C 14 4, 3 5, 3 11 C 3 17, 12 17, 19 12' fill='none' stroke='%237d7a74' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:repeat-y;opacity:.9}
.kicker{display:flex;align-items:center;gap:14px;color:var(--mute);margin-bottom:26px}
.kicker:before{content:"";width:34px;height:1px;background:var(--mute)}
h1.big{font:900 clamp(46px,7.2vw,104px)/.95 var(--serif);letter-spacing:-.035em;margin:0 0 28px;font-variation-settings:"opsz" 144}
h1.big em{font-style:italic;font-weight:800}
h1.big span{display:block}
.lede{max-width:430px;color:var(--ink2);font-size:15.5px;margin:0 0 34px}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.tagline{font:700 clamp(24px,2.6vw,30px)/1.1 var(--hand);color:var(--denim);margin:36px 0 0;transform:rotate(-2deg);transform-origin:left}
.tagline:before{content:"“"}.tagline:after{content:"”"}

.hero-vis{position:relative;background:linear-gradient(180deg,#dcd9d4 0%,#d3d0ca 62%,#c9c6c0 62.2%,#cfccc6 100%);overflow:hidden;min-height:520px}
.hero-vis .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-vis .rack{position:absolute;left:50%;bottom:12%;width:min(78%,560px);transform:translateX(-50%)}
.scribble{position:absolute;font:500 clamp(19px,1.9vw,25px)/1.05 var(--hand);color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.18);max-width:220px;z-index:3}
.scribble svg{display:block;margin-top:4px;overflow:visible}
.s1{top:7%;left:10%;transform:rotate(-4deg)}
.s2{top:30%;right:6%;transform:rotate(3deg);text-align:center}
.tagcard{position:absolute;right:5%;bottom:7%;background:#fff;padding:14px 26px 18px 16px;font:500 22px var(--hand);box-shadow:var(--shadow);transform:rotate(-1.5deg);z-index:3}
.tagcard:before{content:"";position:absolute;left:8px;top:8px;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--mute)}
.tagcard span{display:block;padding-left:12px}
.chat{position:absolute;z-index:4;right:7%;top:9%;max-width:220px;background:#fff;border-radius:14px 14px 14px 4px;padding:12px 14px 13px;box-shadow:var(--shadow);font-size:13px;line-height:1.45;text-decoration:none;animation:floaty 5s ease-in-out infinite}
.chat b{display:flex;align-items:center;gap:6px;font:700 9.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.chat b:before{content:"";width:7px;height:7px;border-radius:50%;background:#4cae6a;box-shadow:0 0 0 3px rgba(76,174,106,.18)}
@keyframes floaty{50%{transform:translateY(-6px)}}
.stickers{position:absolute;left:5%;bottom:5%;display:flex;gap:4px;z-index:3}
.stickers svg{width:clamp(64px,7vw,92px);height:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.18))}
.stickers svg:nth-child(1){transform:rotate(-8deg)}.stickers svg:nth-child(2){transform:rotate(7deg) translateY(6px)}
.hangtag{font:500 15px/1 var(--hand);fill:#3c3a36}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;max-height:none}
  .hero-text{padding-top:44px;padding-bottom:40px}
  .hero-vis{min-height:0;aspect-ratio:4/4.6}
  .chat{top:auto;bottom:24%;right:5%;max-width:190px;font-size:12px}
  .s2{top:26%}
  .hero-vis .rack{width:88%;bottom:16%}
}

/* black strip */
.strip{background:var(--ink);color:var(--paper)}
.strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px;padding-bottom:22px;flex-wrap:wrap}
.strip q{font:italic 700 clamp(18px,2vw,24px) var(--serif);quotes:none}
.strip .mono{color:#9a978f}

/* section heads */
.sec{padding:clamp(56px,8vw,110px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:26px;flex-wrap:wrap}
h2.title{font:italic 800 clamp(36px,5vw,64px)/.98 var(--serif);letter-spacing:-.025em;margin:0;max-width:9ch}
.aside{font:500 21px var(--hand);color:var(--ink2);transform:rotate(-2deg)}

/* tabs as hanging tags */
.tabs{display:flex;gap:14px;overflow-x:auto;padding:16px 2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;position:relative}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;flex:none;border:1px solid #bdb9b2;background:#fbfaf8;padding:8px 14px 7px;font:700 9px var(--mono);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--ink2);border-radius:2px;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.tab:before{content:"";position:absolute;left:50%;top:-14px;height:13px;width:1px;background:#a9a59e}
.tab:after{content:"";position:absolute;left:50%;top:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#d0ccc5}
.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tabs-line{border-top:1px solid #bdb9b2;margin-top:14px}

/* polaroid line */
.line{position:relative;margin-top:30px}
.line:before{content:"";position:absolute;left:-2%;right:-2%;top:9px;height:1.5px;background:#8e8a83;border-radius:2px}
.pols{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:clamp(14px,2.2vw,30px);position:relative}
.pol{position:relative;padding-top:22px;text-decoration:none;display:block}
.pol .clip{position:absolute;left:50%;top:0;width:13px;height:26px;margin-left:-6.5px;background:linear-gradient(90deg,#b4b0a9,#e7e4df 45%,#a19d96);border-radius:2px;z-index:2;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.pol .clip:after{content:"";position:absolute;left:3px;right:3px;top:6px;height:2px;background:#77736c;border-radius:1px}
.pol .card{background:#fff;padding:10px 10px 16px;box-shadow:var(--shadow);transition:transform .25s}
.pol:nth-child(odd) .card{transform:rotate(-1.2deg)}.pol:nth-child(even) .card{transform:rotate(1deg)}
.pol:hover .card{transform:rotate(0) translateY(-4px)}
.pol .num{margin:12px 2px 2px;color:var(--mute);font-size:8.5px}
.pol h3{margin:0 2px;font:italic 700 19px/1.15 var(--serif)}
@media (max-width:700px){
  .line:before{left:-30px;right:-30px}
  .pols{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 18px;gap:16px;scrollbar-width:none}
  .pols::-webkit-scrollbar{display:none}
  .pol{flex:0 0 62%;scroll-snap-align:center}
  .edit .pols{display:grid;grid-template-columns:1fr 1fr;overflow:visible;margin:0;padding:0}
}

/* image placeholder */
.ph{position:relative;background:#e4e1dc;aspect-ratio:4/5;overflow:hidden;display:grid;place-items:center}
.ph:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(255,255,255,.22) 14px 15px)}
.ph span{position:relative;font:400 8.5px/1.7 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:#a7a39c;text-align:center}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.btn.red{background:var(--red);color:#fff;border:3px solid #1d1d1d;box-shadow:0 0 0 2px #e9b23a,0 6px 14px rgba(0,0,0,.2);font-size:12px;padding:14px 26px;border-radius:6px}
/* OLD CSS-drawn rink (replaced by Jordi's real scene, Oct 18 2026):
/* rink * /
.rink-sec{padding:clamp(40px,6vw,80px) 0;background:#e6e3de}
.arena{position:relative;border-radius:clamp(40px,8vw,120px);padding:clamp(20px,3.2vw,40px);background:
 radial-gradient(circle,#c8382f 1.3px,transparent 1.6px) 0 0/9px 8px,
 radial-gradient(circle,#2f5fb3 1.3px,transparent 1.6px) 4px 3px/11px 9px,
 radial-gradient(circle,#e8b93a 1.2px,transparent 1.5px) 2px 5px/13px 10px,
 radial-gradient(circle,#8a8780 1.2px,transparent 1.5px) 6px 1px/7px 7px,#cfcbc4;box-shadow:inset 0 0 0 6px #2b2b2b}
.rink{position:relative;background:#f7f7f5;border-radius:clamp(28px,6vw,96px);border:5px solid #2b2b2b;padding:clamp(80px,9vw,120px) clamp(22px,8vw,140px) clamp(40px,5vw,64px);overflow:hidden;
 background-image:linear-gradient(rgba(47,95,179,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(47,95,179,.06) 1px,transparent 1px);background-size:26px 26px}
.rink .redline{position:absolute;top:0;bottom:0;left:16%;width:5px;background:var(--red);opacity:.85}
.rink .blueline{position:absolute;top:0;bottom:0;left:50%;width:6px;margin-left:-3px;background:var(--rinkblue);opacity:.85}
.rink .faceoff{position:absolute;width:120px;height:120px;border:2px solid rgba(200,56,47,.25);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.board{position:absolute;left:50%;top:-6px;transform:translateX(-50%);z-index:3;background:#1d1d1d;border:3px solid #444;border-radius:10px;padding:10px 18px 8px;text-align:center;box-shadow:0 10px 24px rgba(0,0,0,.3);width:min(420px,86%)}
.board .bulbs{height:6px;background:radial-gradient(circle,#ff6b4a 1.6px,transparent 2px) 0 0/12px 6px;margin:0 6px 6px}
.board h3{margin:0;font:400 clamp(20px,2.6vw,30px)/1 var(--led);color:#ffcf3f;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 0 8px rgba(255,190,40,.6)}
.board .score{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:8px;font:400 22px var(--led);color:#ff5b3a}
.board .score small{display:block;font:700 7px var(--mono);letter-spacing:.2em;color:#aaa}
.board .score .d{background:#000;border:1px solid #333;padding:0 7px;border-radius:3px;text-shadow:0 0 6px rgba(255,80,40,.7)}
.steps{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:28px clamp(30px,8vw,120px);max-width:820px;margin:20px auto 0}
.step b{display:block;font:700 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.step p{margin:0;font:400 12px/1.65 var(--mono);color:var(--ink2)}
.step p em{font-style:italic}
.rink .go{position:relative;z-index:2;display:flex;justify-content:center;margin-top:36px}
.puck{position:absolute;z-index:1;left:22%;top:62%;width:26px;height:12px;border-radius:50%;background:#1d1d1d;animation:slide 6s ease-in-out infinite}
@keyframes slide{0%,10%{transform:translateX(0)}55%,100%{transform:translateX(52vw);opacity:0}}
.net{position:absolute;right:3%;top:50%;transform:translateY(-50%);width:clamp(46px,7vw,86px);z-index:1}
@media (max-width:760px){
  .rink{padding:96px 22px 34px}
  .steps{grid-template-columns:1fr;gap:20px}
  .rink .redline{left:9%;width:3px}.rink .blueline{left:auto;right:9%;width:3px}
  .net{display:none}.puck{display:none}
}

*/

/* collection page */
.coll{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:clamp(24px,4vw,56px);padding-top:30px;padding-bottom:80px}
.coll-side{position:sticky;top:90px;align-self:start}
.coll-side .no{font:400 clamp(56px,7vw,84px)/1 var(--sans);letter-spacing:-.04em}
.coll-side .no:after{content:"/";font-weight:300}
.coll-side h1{font:italic 800 clamp(32px,3.6vw,42px)/1.05 var(--serif);margin:14px 0 14px;letter-spacing:-.02em}
.coll-side p{color:var(--mute);margin:0 0 22px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.tile{position:relative;background:#fff;text-decoration:none;display:flex;flex-direction:column}
.tile .ph{aspect-ratio:4/4.2}
.tile .cap{padding:8px 10px 12px}
.tile .cap .mono{font-size:8.5px;color:var(--mute)}
.tile .cap div:last-child{font-size:13px}
.tile.note{padding:22px 18px;justify-content:flex-end;min-height:220px}
.tile.note.blue{background:var(--denim-soft)}.tile.note.yellow{background:var(--butter)}.tile.note.white{background:#fff}.tile.note.ink{background:var(--ink);color:var(--paper)}
.tile.note h4{margin:0 0 8px;font:italic 700 18px var(--serif)}
.tile.note p{margin:0;font-size:12.5px;line-height:1.55}
.tile .want{position:absolute;right:8px;top:8px;background:rgba(255,255,255,.92);border-radius:20px;padding:5px 10px;font:700 8.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:.2s}
.tile:hover .want{opacity:1}
@media (max-width:760px){
  .coll{grid-template-columns:1fr}
  .coll-side{position:static}
  .grid{grid-template-columns:1fr 1fr;gap:8px}
  .tile.note{min-height:0;grid-column:span 2}
  .tile .want{opacity:1}
}

/* builder */
.bld{display:grid;grid-template-columns:1fr minmax(260px,320px);min-height:calc(100vh - 58px)}
.bld-main{position:relative;padding:34px var(--pad) 120px calc(var(--pad) + 30px)}
.bld-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px;color:var(--mute)}
.prog{display:flex;gap:4px;flex:1;max-width:240px;margin-left:16px}
.prog i{flex:1;height:2px;background:var(--line)}.prog i.on{background:var(--ink)}
.vstep{position:absolute;left:14px;top:110px;writing-mode:vertical-rl;transform:rotate(180deg);font:italic 600 14px var(--serif);color:var(--mute);display:flex;gap:10px;align-items:center}
.vstep:after{content:"";width:8px;height:8px;border:1.5px solid var(--mute);border-radius:50%}
.q-kick{color:var(--mute);margin-bottom:6px}
h2.q{font:800 clamp(34px,5vw,58px)/1 var(--serif);letter-spacing:-.03em;margin:0 0 28px}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;max-width:900px}
.opt{position:relative;text-align:left;border:1px solid var(--line);background:#f8f7f4;padding:22px 20px 22px;border-radius:3px;transition:.15s;min-height:120px;display:flex;flex-direction:column;justify-content:flex-end}
.opt:before{content:"";position:absolute;left:20px;top:20px;width:8px;height:8px;border-radius:50%;background:#cfcbc4;transition:.15s}
.opt:hover{border-color:#bdb9b2;background:#fff}
.opt.on{border-color:var(--ink);background:#fff;box-shadow:var(--shadow)}
.opt.on:before{background:var(--ink);box-shadow:0 0 0 4px rgba(0,0,0,.08)}
.opt strong{font:600 20px/1.2 var(--serif);margin-bottom:4px}
.opt span{font-size:12px;color:var(--mute)}
.opt.sm{min-height:0;padding:44px 16px 16px}
.opt.sm:before{left:16px;top:18px}
.opt .ph{aspect-ratio:1;margin:-30px -4px 12px}
.opts.styles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.field{display:block;margin:0 0 18px;max-width:640px}
.field>span{display:block;font:700 9.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;font:16px/1.5 var(--sans);border:1px solid var(--line);background:#fff;border-radius:3px;padding:13px 14px;color:var(--ink);outline:none;-webkit-appearance:none}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;max-width:640px}
.stepper{display:flex;align-items:center;gap:0;border:1px solid var(--line);background:#fff;width:max-content;border-radius:3px}
.stepper button{border:0;background:none;width:52px;height:52px;font-size:22px}
.stepper input{width:70px;text-align:center;border:0;font:700 22px var(--serif);background:none;-moz-appearance:textfield}
.bld-nav{position:fixed;left:0;bottom:0;width:calc(100% - 320px);display:flex;justify-content:space-between;align-items:center;padding:14px var(--pad) calc(14px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--paper) 30%);z-index:20}
.bld-nav .back{border:0;background:none;font:700 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink2)}
.boardside{border-left:1px solid var(--line);background:#efede9;padding:24px 22px 120px;position:relative}
.boardside .bh{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.live{color:var(--red)}.live:before{content:"● "}
.bare{text-align:center;margin-top:16vh;color:#b3afa8}
.bare .plus{width:38px;height:38px;border:1px solid #c9c5be;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;font-size:20px}
.bare b{display:block;font:italic 700 17px var(--serif);color:#a29e97}
.pin{position:relative;background:#fff;padding:16px 14px 12px;margin:0 0 14px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 6px 16px rgba(0,0,0,.05);animation:pinin .35s ease-out}
.pin:nth-child(odd){transform:rotate(-.8deg)}.pin:nth-child(even){transform:rotate(.7deg)}
.pin:before{content:"";position:absolute;top:-6px;left:50%;width:46px;height:13px;margin-left:-23px;background:rgba(243,228,138,.8)}
.pin .mono{font-size:8.5px;color:var(--mute)}
.pin div:last-child{font:600 23px/1.1 var(--hand)}
.est{margin-top:22px;border-top:1px dashed #c9c5be;padding-top:16px}
.est .amt{font:800 30px var(--serif)}
.est small{display:block;color:var(--mute);font-size:11.5px;line-height:1.5}
@keyframes pinin{from{opacity:0;transform:translateY(-10px) rotate(-3deg)}}
.boardbar{display:none}
@media (max-width:900px){
  .bld{grid-template-columns:1fr}
  .bld-main{padding-left:var(--pad);padding-top:22px;padding-bottom:150px}
  .vstep{display:none}
  .boardside{display:none;position:fixed;inset:auto 0 0;max-height:70vh;overflow:auto;z-index:30;border:0;border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(0,0,0,.12);padding-bottom:120px;border-radius:14px 14px 0 0}
  .boardside.open{display:block}
  .bld-nav{width:100%}
  .boardbar{display:flex;position:fixed;left:var(--pad);right:var(--pad);bottom:calc(76px + env(safe-area-inset-bottom));z-index:31;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:30px;padding:9px 16px;box-shadow:var(--shadow);font-size:13px}
  .boardbar b{font:600 20px var(--hand)}
  .opts{grid-template-columns:1fr}
  .opts.styles,.opts.two{grid-template-columns:1fr 1fr}
  .opt{min-height:96px}
  .row2{grid-template-columns:1fr}
}

/* deposit / success */
.done{max-width:760px;margin:0 auto;padding:50px var(--pad) 90px}
.done .code{display:inline-block;background:#fff;border:1px dashed #b9b5ae;padding:6px 12px;font:700 15px var(--mono);letter-spacing:.12em}
.paycard{background:#fff;box-shadow:var(--shadow);padding:clamp(20px,4vw,34px);margin:26px 0;position:relative}
.paycard:before{content:"";position:absolute;top:-7px;left:40px;width:70px;height:15px;background:rgba(243,228,138,.85);transform:rotate(-3deg)}
.paycard h3{font:800 24px var(--serif);margin:0 0 4px}
.kv{display:grid;grid-template-columns:120px 1fr;gap:8px 16px;margin:16px 0 0;font-size:14px}
.kv dt{font:700 9.5px/2 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.kv dd{margin:0;word-break:break-word}
.copy{border:1px solid var(--line);background:var(--paper);border-radius:3px;font:700 8.5px var(--mono);letter-spacing:.14em;padding:3px 7px;margin-left:8px;vertical-align:1px}
.depamt{font:900 clamp(40px,7vw,60px)/1 var(--serif);letter-spacing:-.03em}

/* status timeline */
.tl{list-style:none;padding:0;margin:24px 0}
.tl li{position:relative;padding:0 0 18px 30px;color:#b0aca5}
.tl li:before{content:"";position:absolute;left:5px;top:6px;width:11px;height:11px;border-radius:50%;border:1.5px solid currentColor;background:var(--paper)}
.tl li:after{content:"";position:absolute;left:10.5px;top:20px;bottom:0;width:1px;background:#d0ccc5}
.tl li:last-child:after{display:none}
.tl li.past{color:var(--ink2)}.tl li.past:before{background:var(--ink2)}
.tl li.now{color:var(--ink);font-weight:600}.tl li.now:before{background:var(--red);border-color:var(--red);box-shadow:0 0 0 4px rgba(200,56,47,.15)}

/* pages */
.page-hd{padding-top:clamp(40px,6vw,80px);padding-bottom:20px}
.page-hd h1{font:900 clamp(44px,7vw,92px)/.95 var(--serif);letter-spacing:-.035em;margin:0}
.page-hd h1 em{font-weight:800}
.page-hd p{max-width:560px;color:var(--ink2);font-size:16px}
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:start;padding-bottom:90px}
.about .ph{aspect-ratio:4/5}
.about .body{font-size:16.5px;line-height:1.75;white-space:pre-line;color:var(--ink2)}
.about .sign{font:700 34px var(--hand);margin-top:10px}
@media (max-width:800px){.about{grid-template-columns:1fr}}
.paybox{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.paybox div{background:#fff;padding:18px;border-top:3px solid var(--ink)}
.paybox b{display:block;font:700 9.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px}
.paybox span{font-size:13px;color:var(--ink2)}
@media (max-width:700px){.paybox{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding:30px 0 40px;color:var(--mute)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer .hand{font-size:22px;color:var(--ink2)}
footer a{text-decoration:none}

/* ===== owner editor ===== */
.fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;display:flex;gap:8px}
.fab .btn{box-shadow:0 8px 20px rgba(0,0,0,.25);padding:13px 16px}
.bld-page .fab{bottom:calc(150px + env(safe-area-inset-bottom))}
.editbar{position:sticky;top:58px;z-index:35;background:var(--butter);border-bottom:1px solid #d9c96a;font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.editbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:42px;padding-top:6px;padding-bottom:6px;flex-wrap:wrap}
.editbar .st{font-weight:400;opacity:.75}
.edit [data-edit]{outline:1.5px dashed rgba(79,111,159,.55);outline-offset:3px;border-radius:2px;cursor:text;min-width:20px;min-height:1em}
.edit [data-edit]:focus{outline:2px solid var(--denim);background:rgba(255,255,255,.55)}
.edit .scribble[data-edit]{outline-color:rgba(255,255,255,.9)}
.ed-img{position:absolute;z-index:6;left:8px;bottom:8px;display:flex;gap:6px}
.ed-img button,.ed-x,.ed-h,.ed-c{border:0;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2);border-radius:20px;font:700 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:8px 11px;line-height:1}
.ed-tools{position:absolute;z-index:7;top:6px;left:6px;right:6px;display:flex;justify-content:space-between;gap:6px;pointer-events:none}
.ed-tools>*{pointer-events:auto}
.ed-h{cursor:grab;touch-action:none;padding:8px 10px;font-size:14px;letter-spacing:0}
.ed-x{background:var(--red);color:#fff}
.addcard{border:1.5px dashed #b9b5ae;background:transparent;display:grid;place-items:center;min-height:200px;font:700 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);border-radius:3px}
.sortable-ghost{opacity:.35}
.sortable-chosen .card,.sortable-chosen{box-shadow:0 18px 40px rgba(0,0,0,.25)!important}
.edit .pol .card{transform:none!important}
.edit .tile .want{display:none}

/* admin */
.adm{max-width:1100px;margin:0 auto;padding:30px var(--pad) 120px}
.adm h1{font:900 clamp(34px,5vw,54px)/1 var(--serif);letter-spacing:-.03em;margin:0 0 6px}
.atabs{display:flex;gap:6px;margin:22px 0;overflow-x:auto}
.atabs button{border:1px solid var(--line);background:#fff;padding:10px 14px;border-radius:30px;font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.atabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.counts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.counts button{border:1px solid var(--line);background:transparent;border-radius:30px;padding:7px 12px;font-size:12px}
.counts button.on{background:#fff;border-color:var(--ink)}
.ord{background:#fff;box-shadow:var(--shadow);padding:20px;margin-bottom:14px;border-left:4px solid var(--line)}
.ord[data-s="Waiting on deposit"]{border-left-color:#e2a33b}.ord[data-s="Deposit received"]{border-left-color:#4cae6a}.ord[data-s="In design"]{border-left-color:var(--denim)}.ord[data-s="In production"]{border-left-color:#8c5bb5}.ord[data-s="Done"]{border-left-color:var(--ink)}
.ord .top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.ord h3{margin:0;font:700 22px var(--serif)}
.ord .meta{color:var(--mute);font-size:12.5px}
.ord .det{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px 18px;margin:14px 0;font-size:13.5px}
.ord .det b{display:block;font:700 8.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.ord .notes{background:var(--paper);padding:10px 12px;font-size:13.5px;white-space:pre-wrap;margin-bottom:12px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.chip{border:1px solid var(--line);background:var(--paper);border-radius:30px;padding:10px 13px;font-size:12.5px;line-height:1}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.ord textarea{width:100%;border:1px solid var(--line);padding:10px;font:14px var(--sans);min-height:60px;border-radius:3px;background:#fdfdfc}
.ord .acts{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:10px;font-size:12.5px}
.ord .acts a,.ord .acts button{border:0;background:none;padding:0;text-decoration:underline;color:var(--ink2)}
.empty{padding:50px 20px;text-align:center;color:var(--mute);border:1.5px dashed var(--line)}
.ptable{width:100%;border-collapse:collapse;margin:8px 0 24px;font-size:14px}
.ptable td{padding:6px 6px 6px 0;border-bottom:1px solid var(--line)}
.ptable input{width:100%;border:1px solid var(--line);padding:9px;font:15px var(--sans);border-radius:3px;background:#fff}
.help li{margin-bottom:8px}
.login{max-width:380px;margin:12vh auto;padding:0 var(--pad);text-align:center}
.login h1{font:900 44px var(--serif);margin:0 0 6px;letter-spacing:-.03em}
.login .field input{text-align:center}
.err{color:var(--red);font-size:13px;min-height:20px}

#toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:10px 16px;border-radius:30px;font:600 12.5px var(--sans);opacity:0;transition:.25s;z-index:100;pointer-events:none;white-space:nowrap}
#toast.show{opacity:1;transform:translate(-50%,0)}
.fade{animation:fade .45s ease-out}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== real-art additions ===== */
.hero-vis{background:radial-gradient(120% 80% at 50% 10%,#f1efeb 0%,#e4e1dc 55%,#d9d5cf 100%)}
.hero-vis:after{content:"";position:absolute;left:0;right:0;bottom:0;height:14%;background:linear-gradient(#cdc8c0,#d6d2cb);border-top:1px solid #c3beb6}
.rackwrap{position:absolute;left:4%;right:4%;top:13%;bottom:13%;z-index:2}
.rope{position:absolute;top:-14%;width:2px;height:calc(14% + 6px);background:#1b1b1b}
.rope.l{left:9%}.rope.r{right:9%}
.rod{position:absolute;left:4%;right:4%;top:0;height:9px;border-radius:5px;background:linear-gradient(#3a3a3a,#111);box-shadow:0 3px 6px rgba(0,0,0,.25)}
.hangs{position:absolute;left:6%;right:6%;top:2px;bottom:0;display:flex;justify-content:center}
.hang{position:relative;flex:0 0 31%;margin:0 -3.5%;display:flex;flex-direction:column;align-items:center;transition:transform .5s cubic-bezier(.2,.8,.2,1);transform-origin:50% 0}
.hang:nth-child(1){z-index:1}.hang:nth-child(2){z-index:2}.hang:nth-child(3){z-index:3}.hang:nth-child(4){z-index:4}
.hang:hover{transform:translateY(-6px) rotate(-1deg);z-index:9}
.hook{width:22px;height:26px;border:2.5px solid #9a968f;border-bottom:0;border-radius:12px 12px 0 0;margin-top:-6px;position:relative}
.hook:after{content:"";position:absolute;left:-30px;right:-30px;bottom:-4px;height:3px;background:#b9b5ae;border-radius:2px;transform:perspective(40px) rotateX(20deg)}
.hang img{width:100%;height:auto;max-height:100%;object-fit:contain;filter:drop-shadow(0 14px 16px rgba(0,0,0,.22));margin-top:-2px;pointer-events:none}
.hang .ht{position:absolute;bottom:14%;right:6%;background:#fffdf7;padding:6px 10px 7px 16px;font:600 15px/1.1 var(--hand);box-shadow:0 3px 8px rgba(0,0,0,.15);transform:rotate(-5deg);max-width:120px;z-index:3}
.hang .ht:before{content:"";position:absolute;left:5px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;border:1px solid #999}
.hang:nth-child(even) .ht{transform:rotate(4deg);bottom:22%}
.hang .ph{width:100%;aspect-ratio:3/4;margin-top:-2px}
.scribble.ink{color:#2a2926;text-shadow:none}
.s1{top:4%;left:6%}
.s2{top:auto;bottom:18%;right:4%;max-width:170px}
.stickers img{width:clamp(66px,7vw,96px);height:auto;filter:drop-shadow(0 5px 8px rgba(0,0,0,.2))}
.stickers img:nth-child(1){transform:rotate(-8deg)}.stickers img:nth-child(2){transform:rotate(9deg) translate(-8px,10px)}
.chat{top:5%;right:4%}
@media (max-width:900px){
  .hero-vis{aspect-ratio:1/1.05}
  .rackwrap{left:0;right:0;top:15%;bottom:15%}
  .hang .ht{font-size:13px;padding:4px 8px 5px 13px;max-width:92px}
  .chat{display:none}
  .s2{bottom:16%;max-width:130px}
  .stickers{bottom:3%}
}

/* studio photos */
.studio{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(10px,1.6vw,18px);align-items:end}
.sp{position:relative;overflow:hidden;background:#ddd}
.sp .ph,.sp img.photo{aspect-ratio:9/14;width:100%;object-fit:cover}
.sp:first-child .ph,.sp:first-child img.photo{aspect-ratio:9/13}
.sp .n1,.sp .n2{position:absolute;z-index:3;font:600 clamp(19px,1.8vw,25px)/1.05 var(--hand);color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35);max-width:70%}
.sp .n1{left:7%;top:6%;transform:rotate(-4deg)}
.sp .n2{right:6%;bottom:7%;text-align:right;transform:rotate(3deg)}
.sp .n2.dark{color:var(--ink);text-shadow:0 0 10px rgba(255,255,255,.8)}
.sp .n1 svg{display:block;margin-top:2px}
.studio-intro{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:end;margin-bottom:28px}
.studio-intro p{color:var(--ink2);max-width:440px;margin:0;justify-self:end}
.kick2{color:var(--mute);margin-bottom:10px}
@media (max-width:760px){
  .studio{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--pad)*-1);padding:0 var(--pad);gap:10px;scrollbar-width:none}
  .studio::-webkit-scrollbar{display:none}
  .sp{flex:0 0 76%;scroll-snap-align:center}
  .edit .studio{display:grid;grid-template-columns:1fr;margin:0;padding:0}
  .studio-intro{grid-template-columns:1fr}.studio-intro p{justify-self:start}
}

/* art on tiles & polaroids: show whole garment on white */
.ph.art{background:#fff}
.ph.art:before{display:none}
.ph.art img{object-fit:contain;padding:6%}
.pol .ph.art img{padding:4%}
.opt .ph.art img{padding:4%}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);align-items:center}
.feature .ph{aspect-ratio:3/4}
@media (max-width:760px){.feature{grid-template-columns:1fr}}
/* fixes round 1 */
.hangs{align-items:flex-start}
.hook:after{display:none}
.hang .ht{bottom:10%}
.hang:nth-child(even) .ht{bottom:18%}
@media (max-width:900px){
  .hero-vis{aspect-ratio:1/1.12}
  .rackwrap{top:21%;bottom:12%}
  .s1{top:3%;left:5%;max-width:160px}
  .s2{bottom:4%;right:4%;max-width:140px;font-size:17px}
  .s2 svg{display:none}
  .hang .ht{font-size:11.5px;padding:3px 6px 4px 11px;max-width:78px;right:2%}
  .hang .ht:before{width:4px;height:4px;left:4px}
  .stickers img{width:58px}
}
/* old rink mobile tweaks (retired):
@media (max-width:760px){
  .rink{padding:132px 30px 34px}
  .rink .redline{left:12px}.rink .blueline{right:12px}
  .rink .faceoff{display:none}
  .board{width:calc(100% - 36px)}
}
*/
.hang .ht{bottom:-4%!important;right:auto;left:50%;margin-left:-20px;font-size:14px}
.hang:nth-child(even) .ht{bottom:-9%!important}
.s1{left:18%}
.pol .ph{aspect-ratio:1/1}
.pol .ph.art img{padding:2%}
@media (max-width:600px){.hang .ht{display:none}.edit .hang .ht{display:block;font-size:10px}.s1{left:20%}}
/* fixes round 2 */
.pols{display:flex;overflow-x:auto;scroll-snap-type:x proximity;gap:clamp(14px,2vw,26px);padding:0 2px 22px;scrollbar-width:thin}
.pol{flex:0 0 clamp(168px,15.5vw,230px);scroll-snap-align:start}
.edit .pols{flex-wrap:wrap;overflow:visible}
.puck{top:90%}
@media (min-width:901px){
  .rackwrap{top:24%;bottom:10%;left:2%;right:2%}
  .rope{top:-30%;height:calc(30% + 6px)}
  .hangs{left:7%;right:3%}
  .hang{flex:0 0 37%;margin:0 -6.5%}
  .chat{top:auto;bottom:20%;right:4%}
  .s2{bottom:auto;top:7%;right:5%;max-width:200px}
  .s2 svg{transform:rotate(150deg)!important;margin:0 0 0 auto}
  .s1{top:7%;left:6%}
}
@media (max-width:700px){.pol{flex:0 0 62%}}
/* fixes round 3 */
.hang .ht{left:10%!important;margin-left:0!important}
@media (min-width:901px){
  .rope.l{left:7%}.rope.r{right:7%}
  .s1{left:14%;top:6%;max-width:190px}
  .s2{right:13%;top:7%;max-width:190px}
  .chat{bottom:3.5%;right:4%}
}
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
@media (max-width:700px){.line:before{left:-16px;right:-16px}}
@media (max-width:500px){.kv{grid-template-columns:84px 1fr;gap:6px 10px}}

/* ================= Revision 1 ================= */
:root{--round:var(--sans)}

/* header right & basket */
.hdr-r{display:flex;align-items:center;gap:14px}
.basketbtn{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--ink);background:#fff;border-radius:30px;padding:7px 13px;font:600 14px var(--round)}
.basketbtn b{background:var(--red);color:#fff;border-radius:20px;min-width:20px;height:20px;display:grid;place-items:center;font-size:12px}
@media (max-width:620px){.basketbtn span{display:none}.basketbtn{padding:7px 10px}}

/* Shop dropdown — hanging tags */
.navshop{position:relative}
.navshop>a small{font-size:10px;margin-left:2px}
.dd{position:absolute;left:50%;top:100%;transform:translateX(-30%);padding-top:14px;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;z-index:60}
.navshop:hover .dd,.navshop:focus-within .dd{opacity:1;visibility:visible}
.dd-in{display:flex;gap:28px;background:#fbfaf7;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.14);padding:18px 24px 26px;width:min(820px,90vw)}
.dd-rack{position:relative;flex:1;padding-top:6px}
.dd-rod{display:block;height:7px;border-radius:6px;background:linear-gradient(#b9b5ae,#8f8b84);box-shadow:0 2px 3px rgba(0,0,0,.15)}
.dd-tags{display:flex;flex-wrap:wrap;gap:0 10px;margin-top:-3px}
.htag{position:relative;display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;transform-origin:50% 0;margin-bottom:6px}
.htag .str{display:block;width:1.5px;height:22px;background:#9b968e}
.htag .tg{position:relative;display:block;background:#fff;border:1.5px solid var(--ink);border-radius:6px 6px 10px 10px;padding:9px 14px 8px;font:600 14px var(--round);color:var(--ink);white-space:nowrap;box-shadow:0 4px 8px rgba(0,0,0,.08)}
.htag .tg:before{content:"";position:absolute;left:50%;top:5px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper)}
.htag .tg{padding-top:17px}
.htag:nth-child(3n+1) .tg{background:var(--denim-soft)}.htag:nth-child(3n+2) .tg{background:#fff}.htag:nth-child(3n) .tg{background:#f6eeb8}
.htag:hover{animation:swing 1.1s ease-in-out}
.navshop:hover .dd-tags .htag,.navshop:focus-within .dd-tags .htag{animation:dropin .55s cubic-bezier(.3,1.6,.5,1) both;animation-delay:var(--d)}
.navshop:hover .dd-tags .htag:hover{animation:swing 1.1s ease-in-out}
@keyframes swing{0%{transform:rotate(0)}20%{transform:rotate(9deg)}45%{transform:rotate(-7deg)}65%{transform:rotate(4deg)}85%{transform:rotate(-2deg)}100%{transform:rotate(0)}}
@keyframes dropin{0%{transform:translateY(-14px) rotate(-6deg);opacity:0}60%{opacity:1}100%{transform:none}}
.dd-side{width:180px;border-left:1px dashed var(--line);padding-left:22px;display:flex;flex-direction:column;gap:2px}
.dd-h{color:var(--mute);margin-bottom:6px}
.dd-side a{font:500 15.5px var(--round);text-decoration:none;padding:4px 0;border:0!important;color:var(--ink2)}
.dd-side a:hover{color:var(--red)}
.dd-side .dd-all{margin-top:auto;font-weight:600;color:var(--ink)}
.menu{overflow-y:auto}
.mtags{display:flex;flex-wrap:wrap;gap:0 8px;padding:4px 0 6px;border-top:7px solid #a9a59e;border-radius:4px;margin-top:4px}
.menu .mtags a,.menu .mpieces a{font:600 14px var(--round);border:0;padding:0}
.menu .mtags a .tg{font-size:13.5px;padding:15px 11px 7px}
.mpieces{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 12px}
.menu .mpieces a{border:1px solid var(--line)!important;border-radius:20px;padding:6px 12px;background:#fff}

/* hero with Jordi's photo + speech bubble */
.hero-photo{position:relative;background:radial-gradient(120% 80% at 50% 10%,#f1efeb 0%,#e4e1dc 55%,#d9d5cf 100%);min-height:520px;overflow:hidden}
.hero-photo .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-photo .slot{position:absolute;inset:6% 7% 7%;border:2.5px dashed #a8a39b;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#8b867e;text-align:center;padding:24px;background:rgba(255,255,255,.35)}
.hero-photo .slot .hand{font-size:clamp(22px,2.4vw,30px);color:var(--ink2);margin:0;max-width:22ch;line-height:1.15}
.hero-photo .stickers{left:6%;bottom:6%}
.bubble{position:absolute;z-index:5;left:34%;top:9%;max-width:min(300px,60%);background:#fff;border:2px solid var(--ink);border-radius:28px;padding:14px 20px 12px;cursor:pointer;box-shadow:4px 5px 0 var(--ink);transition:transform .2s;animation:bob 4.5s ease-in-out infinite}
.bubble .bt{display:block;font:700 clamp(21px,2.1vw,27px)/1.15 var(--hand);color:var(--ink)}
.bubble small{display:block;margin-top:4px;font:500 12.5px var(--round);color:var(--mute)}
.bubble:before,.bubble:after{content:"";position:absolute;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.bubble:before{width:20px;height:20px;left:22px;bottom:-26px;box-shadow:2px 3px 0 var(--ink)}
.bubble:after{width:11px;height:11px;left:8px;bottom:-42px}
.bubble:hover{transform:rotate(-2deg) scale(1.03)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.edit .bubble{animation:none}
@media (max-width:900px){.hero-photo{min-height:0;aspect-ratio:4/4.4}.bubble{left:auto;right:5%;top:6%;max-width:62%}}

/* rack moved lower */
.racksec{padding:clamp(30px,5vw,60px) 0 0}
.racksec .hero-vis{min-height:clamp(420px,46vw,620px);border-radius:16px;border:1px solid var(--line)}
@media (max-width:900px){.racksec .wrap{padding-left:0;padding-right:0}.racksec .hero-vis{border-radius:0;border-left:0;border-right:0;min-height:0}}

/* lineup / bench / call-ups */
.lineup{background:linear-gradient(#fff0,#e9edf3 30%,#e9edf3 80%,#fff0)}
.lu-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px}
h2.title.wide{max-width:16ch}
.kick2{color:var(--mute);margin-bottom:8px}
.aside.sm{font-size:19px}
.starters,.bench,.cu-row{display:grid;gap:14px}
.starters{grid-template-columns:repeat(5,minmax(0,1fr))}
.starters .tile{border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.tile .jno{position:absolute;left:10px;top:10px;z-index:2;width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font:800 18px var(--serif);box-shadow:0 2px 0 #8d2620}
.starters .tile .cap .jno{position:absolute}
.bench-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:48px 0 12px}
h3.benchh{font:italic 800 clamp(26px,3vw,36px) var(--serif);margin:0 0 14px;letter-spacing:-.02em}
.benchwrap{position:relative;padding-bottom:26px}
.bench{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));position:relative;z-index:1}
.bench .tile{border-radius:10px;overflow:hidden;transform:rotate(-1deg)}.bench .tile:nth-child(even){transform:rotate(1.2deg)}
.plank{position:absolute;left:-10px;right:-10px;bottom:0;height:34px;border-radius:6px;background:repeating-linear-gradient(90deg,#b98c5b 0 120px,#ad8050 120px 122px);box-shadow:inset 0 -6px 0 rgba(0,0,0,.15),0 6px 10px rgba(0,0,0,.12)}
.cu-row{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.cu-row .tile{border-radius:12px;overflow:hidden;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.cu-row .tile .cap .mono{color:var(--red);font-weight:600}
.callups{background:#f6eeb8}
@media (max-width:900px){.starters{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}.starters .tile{scroll-snap-align:start}}

/* tiles */
.tile{border-radius:10px;overflow:hidden}
.tile .cap{font-size:15px}
.ed-fields{display:flex;flex-wrap:wrap;gap:6px 12px;padding:8px 10px 12px;background:#fffbe3;border-top:1px dashed #d9c96a;font:500 12.5px var(--round)}
.ed-fields label{display:flex;align-items:center;gap:6px}
.ed-fields .ef{min-width:40px;display:inline-block;background:#fff;padding:1px 6px;border-radius:4px}
.ed-fields select{font:inherit;border:1px solid var(--line);border-radius:6px;padding:3px}
.ed-fields.big{font-size:14px;padding:12px 14px;border:1px dashed #d9c96a;border-radius:10px;margin:14px 0}
.addcard{border-radius:12px}

/* big shop rack + slide */
.bigrack-sec{padding:20px 0 40px;overflow:hidden}
.bigrack{position:relative;padding:0 var(--pad);transition:transform .55s cubic-bezier(.6,0,.4,1)}
.br-rod{display:block;height:12px;border-radius:8px;background:linear-gradient(#c9c5be,#8d8981);box-shadow:0 4px 6px rgba(0,0,0,.18);margin:0 -40px}
.br-hangs{display:flex;gap:18px;overflow-x:auto;padding:0 6px 26px;scroll-snap-type:x mandatory;scrollbar-width:none}
.br-hangs::-webkit-scrollbar{display:none}
.brh{flex:0 0 clamp(190px,22vw,260px);display:flex;flex-direction:column;align-items:center;text-decoration:none;transform-origin:50% 0;scroll-snap-align:start;animation:dropin .7s cubic-bezier(.3,1.5,.5,1) both;animation-delay:var(--d);position:relative}
.brh:hover{animation:swing 1.2s ease-in-out}
.br-hook{width:26px;height:34px;border:3px solid #8d8981;border-bottom:0;border-radius:14px 14px 0 0;margin-top:-6px;position:relative}
.br-hook:after{content:"";position:absolute;left:50%;bottom:-14px;width:3px;height:14px;background:#8d8981;margin-left:-1.5px}
.br-card{width:100%;margin-top:12px;background:#fff;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.12);overflow:hidden}
.br-card .ph{aspect-ratio:4/4.6}
.br-tag{padding:12px 14px 14px;display:flex;flex-direction:column;gap:2px}
.br-tag b{font:italic 800 21px/1.1 var(--serif)}
.br-tag .mono{color:var(--mute);font-size:12.5px}
.rackhint{font-size:22px;color:var(--ink2);margin:0}
.bigrack.slideout,.pols.slideout{transform:translateX(-110vw)}
.pols.slideout{transition:transform .55s cubic-bezier(.6,0,.4,1)}
.slideout .picked{transform:translateY(-10px) rotate(4deg)}
.slidein{animation:slidein .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes slidein{from{transform:translateX(60vw);opacity:.2}to{transform:none;opacity:1}}
main{overflow-x:clip}
.tab-h{flex:none}
.tabs .htag .tg{font-size:13.5px;padding:15px 12px 7px}
.tabs .htag.on .tg{background:var(--ink);color:#fff}.tabs .htag.on .tg:before{border-color:#fff;background:var(--ink)}
.tabs{padding-top:0;align-items:flex-start;border-top:6px solid #b3afa8;border-radius:3px;margin-top:4px}

/* city filter + empty state */
.cityf{display:flex;flex-direction:column;gap:6px;margin-top:24px;max-width:320px}
.cityf .mono{color:var(--ink2);font-weight:600}
.cityf select{font:500 16px var(--round);padding:12px 14px;border:1.5px solid var(--ink);border-radius:12px;background:#fff;appearance:auto}
.emptyteam{background:#fff;border:2px dashed #b9b5ae;border-radius:18px;padding:clamp(26px,5vw,48px);text-align:center;max-width:640px;margin:10px auto 60px}
.emptyteam h3{font:italic 800 clamp(26px,3.4vw,38px)/1.1 var(--serif);margin:10px 0 12px}
.emptyteam p{font-size:16px;color:var(--ink2);max-width:46ch;margin:0 auto 22px}
.emptyteam .ctas{justify-content:center}
.emptyteam button.btn{cursor:pointer}
.et-ico{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--denim-soft)}
.et-ico svg{width:32px;height:26px}

/* piece view */
.pv{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);padding-top:28px;padding-bottom:60px;align-items:start}
.pv-img{position:relative;border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.pv-img .ph{aspect-ratio:1/1.05}
.pv-note{position:absolute;right:16px;bottom:12px;font-size:22px;color:var(--ink2);transform:rotate(-4deg)}
.pv-info h1{font:900 clamp(34px,4.6vw,58px)/1 var(--serif);letter-spacing:-.03em;margin:8px 0 6px}
.crumbs a{text-decoration:none;color:var(--mute)}.crumbs a:hover{color:var(--ink)}
.pv-tag{color:var(--ink2);margin:0 0 12px}
.teamchips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.teamchips span{background:var(--denim-soft);border-radius:20px;padding:4px 11px;font:500 13px var(--round)}
.pv-price{font:500 16px var(--round);margin:14px 0 20px}.pv-price b{font:800 24px var(--serif)}.pv-price small{display:block;color:var(--mute);font-size:13px}
.btn.love{font-size:17px;padding:18px 28px;background:var(--red)}
.btn.love:hover{transform:translateY(-2px) rotate(-1deg)}
.mine{background:#fff;border:1.5px solid var(--ink);border-radius:16px;padding:20px;box-shadow:5px 5px 0 var(--ink);margin-top:6px}
.mine h3{font:italic 800 26px var(--serif);margin:0 0 12px}
.whochips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.chip small{color:var(--mute);font-size:11px}
.chip.on small{color:#ddd}
.hint{display:block;color:var(--mute);font-size:13px;margin-top:6px}
.pv-alt{margin-top:22px;font-size:14.5px;color:var(--ink2)}
.tiny{font:500 13px var(--round);color:var(--mute);margin:10px 0 0}
@media (max-width:800px){.pv{grid-template-columns:1fr}}

/* scrim, drawer, modals */
body.locked{overflow:hidden}
.scrim{position:fixed;inset:0;background:rgba(27,27,27,.38);z-index:80;opacity:0;visibility:hidden;transition:.25s}
.scrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--paper);z-index:81;transform:translateX(102%);transition:transform .35s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;padding:20px 22px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;box-shadow:-12px 0 40px rgba(0,0,0,.15)}
.drawer.open{transform:none}
.dr-head{display:flex;justify-content:space-between;align-items:center}
.dr-head h3{display:flex;align-items:center;gap:10px;font:italic 800 28px var(--serif);margin:0}
.x{border:1.5px solid var(--ink);background:#fff;width:38px;height:38px;border-radius:50%;font-size:22px;line-height:1;display:grid;place-items:center;flex:none}
.x.sm{width:28px;height:28px;font-size:17px}
.dr-intro{color:var(--ink2);font-size:14.5px;margin:6px 0 14px}
.dr-items{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.dr-item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:start;background:#fff;border-radius:12px;padding:10px;box-shadow:var(--shadow)}
.dr-item img{width:64px;height:64px;object-fit:contain;background:#fff}
.dr-item b{display:block;font:600 15px var(--round)}.dr-item span{display:block;font-size:13px;color:var(--ink2)}.dr-item em{display:block;font-size:13px;color:var(--mute)}
.dr-form .row2{gap:0 12px}
.dr-est{font-size:15px}.dr-est small{display:block;color:var(--mute);font-size:12.5px}
.dr-empty{display:flex;flex-direction:column;gap:18px;align-items:center;margin-top:40px;text-align:center}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 16px}
.seg button{border:1.5px solid var(--line);background:#fff;border-radius:30px;padding:9px 14px;font:500 14px var(--round)}
.seg button.on{border-color:var(--ink);background:var(--ink);color:#fff}
.modal{position:fixed;z-index:82;left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,92vw);max-height:90vh;overflow-y:auto;background:#fff;border-radius:6px;padding:28px 26px 24px;box-shadow:0 30px 60px rgba(0,0,0,.25);animation:pop .3s cubic-bezier(.3,1.4,.5,1)}
@keyframes pop{from{transform:translate(-50%,-46%) scale(.94);opacity:0}}
.modal .x{position:absolute;right:14px;top:14px}
.modal h3{font:italic 800 30px/1.05 var(--serif);margin:0 0 6px;padding-right:44px}
.modal .sub{color:var(--ink2);margin:0 0 16px;font-size:15px}
.notecard{background:#fffdf5 repeating-linear-gradient(#fffdf5 0 31px,#e3e8f1 31px 32px);border-top:10px solid var(--denim-soft);transform:translate(-50%,-50%) rotate(-.6deg)}
.notecard .field input,.notecard .field textarea{background:#fff}
.notecard .hand.big{font-size:30px;line-height:1.2;margin:14px 0 22px}
.picker{width:min(760px,94vw)}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-bottom:16px}
.pk{border:2px solid var(--line);background:#fff;border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:4px;font:500 12px var(--round);text-align:left}
.pk img{aspect-ratio:1;object-fit:contain;width:100%}
.pk.on{border-color:var(--red);box-shadow:0 0 0 2px var(--red)}

/* order board */
.ob{min-height:calc(100vh - 58px);padding-bottom:110px}
.ob-top{display:flex;justify-content:space-between;align-items:center;padding-top:18px;padding-bottom:6px}
.ob .prog{display:flex;gap:5px;margin:4px 0 0}
.ob .prog i{flex:1;height:5px;border-radius:5px;background:#dcd8d1}.ob .prog i.on{background:var(--ink)}
.ob-body{padding-top:28px;max-width:980px}
h2.q{font:italic 800 clamp(32px,5vw,58px)/1.02 var(--serif);letter-spacing:-.025em;margin:0 0 26px}
h2.q.sm{font-size:clamp(26px,3.4vw,38px);margin:0}
.q-kick{color:var(--ink2);font-weight:600;margin:22px 0 10px}
.bigbtns{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.bigbtns.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.bigbtns.three{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.bigbtn{position:relative;border:2px solid var(--ink);background:#fff;border-radius:22px;padding:22px 20px;text-align:left;display:flex;flex-direction:column;gap:4px;box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s,background .15s}
.bigbtn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.bigbtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.bigbtn strong{font:600 20px/1.2 var(--round)}
.bigbtn span{font:400 14px var(--round);color:var(--ink2)}
.bigbtn.on{background:var(--butter)}
.bigbtns.two .bigbtn{min-height:190px;justify-content:flex-end;padding:26px}
.bigbtns.two .bigbtn strong{font:italic 800 clamp(22px,2.6vw,30px)/1.1 var(--serif)}
.bigbtns.two.sm .bigbtn{min-height:0}
.bigbtns.two.sm .bigbtn strong{font:600 19px var(--round)}
.bb-ico{position:absolute;top:18px;right:20px;font-style:normal;font-size:34px}
.bigbtns.two .bigbtn:first-child{background:var(--denim-soft)}.bigbtns.two .bigbtn:first-child.on{background:var(--butter)}
@media (max-width:640px){.bigbtns.two{grid-template-columns:1fr}.bigbtns.two .bigbtn{min-height:130px}}
.pinboard{position:sticky;top:66px;z-index:20;background:#c9a77c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='1' cy='1' r='.8' fill='%23000' opacity='.12'/%3E%3C/svg%3E");border:8px solid #8e6a43;border-radius:14px;padding:10px 12px 12px;margin-bottom:22px;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.pb-head{display:flex;justify-content:space-between;align-items:center;color:#2b1d10;margin-bottom:6px}
.pb-head b{font-size:24px}
.pb-pins{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 4px}
.pin2{position:relative;flex:0 0 132px;background:#fff;padding:7px 7px 8px;border-radius:3px;box-shadow:0 4px 8px rgba(0,0,0,.2);transform:rotate(-2deg);animation:pinin .35s cubic-bezier(.3,1.6,.5,1)}
.pin2:nth-child(even){transform:rotate(2deg)}
.pin2:before{content:"";position:absolute;left:50%;top:-6px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--red);box-shadow:0 2px 2px rgba(0,0,0,.3);z-index:2}
.pin2 img{width:100%;aspect-ratio:1;object-fit:contain}
.pin2 span{display:block;font:600 12px/1.25 var(--round);margin:4px 0}
.pin2 input{width:100%;border:0;border-bottom:1px dashed #bbb;font:500 15px var(--hand);padding:2px 0;outline:0;background:transparent}
.pin2 .x{position:absolute;right:-8px;top:-8px;z-index:3}
@keyframes pinin{from{transform:scale(.6) rotate(-10deg);opacity:0}}
.pb-empty{color:#3a2a19;font-size:21px;margin:6px 0}
.mzbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.masonry{columns:4 200px;column-gap:12px}
.mz{position:relative;display:block;width:100%;break-inside:avoid;margin:0 0 12px;border:0;padding:0;background:#fff;border-radius:16px;overflow:hidden;text-align:left;box-shadow:var(--shadow);transition:transform .15s}
.mz:hover{transform:translateY(-2px)}
.mz img{width:100%;height:auto;padding:8%}
.mz:nth-child(3n) img{padding:14% 8%}.mz:nth-child(4n+1) img{padding:4%}
.mz-pin{position:absolute;right:10px;top:10px;background:var(--red);color:#fff;border-radius:20px;padding:6px 12px;font:600 13px var(--round);opacity:0;transition:.2s}
.mz:hover .mz-pin,.mz.on .mz-pin{opacity:1}
.mz.on{box-shadow:0 0 0 3px var(--red)}
.mz.on .mz-pin{background:var(--ink)}
.mz-cap{display:block;padding:0 14px 12px}.mz-cap b{display:block;font:600 14.5px var(--round)}.mz-cap small{color:var(--mute);font-size:12.5px}
@media (hover:none){.mz-pin{opacity:1}}
@media (max-width:600px){.masonry{columns:2}}
.envstage{position:relative;height:clamp(300px,42vw,400px);display:grid;place-items:end center;padding-bottom:10px}
.flyers{position:absolute;left:50%;top:0;width:0;height:100%}
.flyer{position:absolute;left:-55px;top:0;width:110px;height:110px;object-fit:contain;background:#fff;border-radius:6px;box-shadow:0 6px 14px rgba(0,0,0,.2);padding:6px;animation:fly 1s cubic-bezier(.5,0,.6,1) both;animation-delay:calc(var(--i) * 140ms)}
@keyframes fly{0%{transform:translate(var(--x),0) rotate(-6deg) scale(1)}60%{opacity:1}100%{transform:translate(0,210px) rotate(8deg) scale(.18);opacity:0}}
.envelope{position:relative;width:min(340px,80vw);aspect-ratio:1.55;perspective:600px}
.env-back{position:absolute;inset:0;background:#e9d8b4;border-radius:8px}
.env-front{position:absolute;inset:0;z-index:3;border-radius:8px;background:linear-gradient(to top right,#f4e6c7 50%,transparent 50.5%) left/50.5% 100% no-repeat,linear-gradient(to top left,#f0e0bd 50%,transparent 50.5%) right/50.5% 100% no-repeat,linear-gradient(transparent 38%,#f7ebd0 38%);box-shadow:0 14px 30px rgba(0,0,0,.18);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:14px}
.env-flap{position:absolute;left:0;right:0;top:0;height:60%;z-index:4;background:#ead6ae;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;animation:flap .5s ease both;animation-delay:calc(1s + var(--n,3) * 140ms)}
@keyframes flap{from{transform:rotateX(180deg);z-index:1}to{transform:rotateX(0);z-index:4}}
.env-to{font-size:22px;color:#6b5634;margin-top:4px}
.stk{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.stk span{width:46px;height:46px;border-radius:50%;background:#fff;border:2.5px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.2);overflow:hidden;transform:rotate(calc(var(--i) * 17deg - 20deg))}
.stk span img{width:100%;height:100%;object-fit:contain;padding:3px}
.stk.onenv span{animation:stick .4s cubic-bezier(.3,1.8,.5,1) both;animation-delay:calc(1.1s + var(--i) * 140ms)}
@keyframes stick{from{transform:scale(0) rotate(-30deg)}}
.envnote{text-align:center;font-size:24px;color:var(--ink2)}
.ob-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));background:rgba(243,241,237,.95);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.ob-nav .back{border:0;background:none;font:600 15px var(--round)}
.ob-est{text-align:center;line-height:1.15}.ob-est .mono{display:block;color:var(--mute);font-size:12px}.ob-est b{font:800 clamp(18px,2.4vw,24px) var(--serif)}
.summary{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:18px 20px;box-shadow:4px 4px 0 var(--ink);margin:10px 0}
.summary p{font:italic 800 clamp(22px,2.8vw,30px)/1.15 var(--serif);margin:10px 0 4px}.summary small{color:var(--mute)}
.summary .stk{justify-content:flex-start}
.bld-page footer{display:none}
.stepper button{font-family:var(--round)}

/* sent + client file */
.sentitems{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.sentitems div{display:flex;align-items:center;gap:8px;background:#fff;border-radius:30px;padding:4px 14px 4px 4px;box-shadow:var(--shadow);font:500 14px var(--round)}
.sentitems img{width:38px;height:38px;object-fit:contain;border-radius:50%;background:#fff}
.gbtn{background:#fff;color:var(--ink);border:1.5px solid var(--ink);font-size:16px;padding:15px 26px}
.or{display:flex;align-items:center;gap:12px;color:var(--mute);margin:26px 0 14px;font:500 14px var(--round)}
.or:before,.or:after{content:"";flex:1;height:1px;background:var(--line)}
.filehd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.file .paycard{margin-bottom:16px}.file .paycard .sub{color:var(--mute);margin:-4px 0 12px;font-size:14px}
.famrow{display:grid;grid-template-columns:1.4fr 1fr 1fr 64px 28px;gap:6px;align-items:center;margin-bottom:8px}
.famrow input,.famrow select{font:500 15px var(--round);border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:#fff;min-width:0}
@media (max-width:560px){.famrow{grid-template-columns:1fr 1fr 28px}.famrow [data-k=size]{grid-column:1}.famrow [data-k=number]{grid-column:2}}

/* studio / admin extras */
.staff{margin-top:26px;background:#fff;border:1px dashed #b9b5ae;border-radius:12px;padding:14px 16px;font-size:15px}
.staff .mono{color:var(--mute);display:block;margin-bottom:4px}
.ah{font:800 26px var(--serif);margin:28px 0 6px}
.tarea{width:100%;min-height:180px;font:500 15px/1.5 var(--round);border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:16px}
.badge{background:var(--red);color:#fff;border-radius:20px;padding:0 7px;font-size:12px;margin-left:4px}
.ord .kind{font:600 12px var(--round);background:var(--denim-soft);border-radius:20px;padding:3px 9px;vertical-align:4px;margin-left:6px}
.ord.msg.unread{border-left:4px solid var(--red)}
.oitems{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.oitem{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;background:var(--paper);border-radius:10px;padding:6px 10px 6px 6px}
.oitem img{width:52px;height:52px;object-fit:contain;background:#fff;border-radius:8px}
.oitem b{font:600 14.5px var(--round)}.oitem small{color:var(--mute)}.oitem span{display:block;font-size:13px;color:var(--ink2)}.oitem em{display:block;font-size:13px;color:var(--mute)}
.lineup + .sec{padding-top:20px}
.page-hd .mono.kick2{margin-bottom:6px}
/* keep clear of Netlify's "Powered by Netlify" badge (bottom-right, free plan) */
.ob-nav{padding-right:calc(var(--pad) + 150px)}
.fab{bottom:calc(64px + env(safe-area-inset-bottom))}
@media (max-width:700px){.ob-nav{padding-right:var(--pad);padding-bottom:calc(54px + env(safe-area-inset-bottom))}.ob{padding-bottom:160px}.ob-est b{font-size:17px}}
.show-sm{display:none}
@media (max-width:700px){
  .show-sm{display:inline}.hide-sm{display:none}
  .pin2{flex-basis:100px;padding:5px 5px 6px}.pin2 span{font-size:11px}.pin2 input{font-size:14px}
  .pinboard{border-width:6px;padding:6px 8px 8px;top:62px}.pb-head b{font-size:20px}
  .ob-nav .btn{padding:13px 16px;font-size:14px;white-space:nowrap}.ob-est{white-space:nowrap}.ob-est b{font-size:16px}
  .bld-page #toast{bottom:calc(130px + env(safe-area-inset-bottom))}
}
/* rev1b: nicknames, product page gallery, fit + fabric, collection notes */
.nick{font:700 19px/1.1 var(--hand);color:var(--red);margin-bottom:2px}
.mz-cap .nick{display:block;font-style:normal;font-size:17px}
.pv-nick{font-size:clamp(26px,3vw,34px);color:var(--red);margin:6px 0 -4px;transform:rotate(-2deg);transform-origin:left}
.edit [data-edit]:empty:before{content:"tap to add…";color:#aaa}
.collnote{font-size:22px;color:var(--ink2);line-height:1.2;margin:4px 0 10px!important}
.br-tag small.hand{font-size:16px;color:var(--ink2);line-height:1.15;margin-top:4px}
.pv-gal{position:sticky;top:76px}
.pv-main{position:relative;border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.pv-main .ph{aspect-ratio:1/1.05}
.pv-cap{position:absolute;left:14px;top:12px;background:rgba(255,255,255,.9);border-radius:20px;padding:4px 10px;font-size:12.5px}
.pv-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.pv-th{border:2px solid transparent;background:#fff;border-radius:12px;padding:4px;display:flex;flex-direction:column;gap:2px;font:500 11.5px/1.2 var(--round);color:var(--ink2);box-shadow:var(--shadow)}
.pv-th img{aspect-ratio:1;object-fit:contain;width:100%}
.pv-th.on{border-color:var(--ink)}
.pv-slots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.slot2{margin:0;background:#fff;border-radius:12px;padding:8px;box-shadow:var(--shadow);position:relative}
.slot2 figcaption{margin-bottom:6px;color:var(--ink2)}
.slot2 .ph{aspect-ratio:1;border-radius:8px}
.pv-specs{display:grid;gap:14px;margin:14px 0 4px;padding:14px 16px;background:#fff;border-radius:14px;border:1px solid var(--line)}
.pv-specs .mono{display:block;color:var(--mute);margin-bottom:6px;font-weight:600}
.fm{display:grid;grid-template-columns:repeat(3,1fr);background:var(--paper);border-radius:30px;padding:4px;gap:4px}
.fm i{font:500 13.5px var(--round);font-style:normal;text-align:center;padding:7px 4px;border-radius:30px;color:var(--mute)}
.fm i.on{background:var(--ink);color:#fff}
.fabric p{margin:0;font-size:15px;color:var(--ink2)}
.ef-block{display:block!important;min-height:44px;padding:6px 8px!important;font-size:14px;line-height:1.45}
@media (max-width:800px){.pv-gal{position:static}}

/* ================= Earlier look for the rev1 components =================
   Same visual vocabulary as the first version: Space Mono labels, Inter body, Fraunces headlines,
   thin hairlines, 2–3px corners, soft paper shadows, yellow tape. No chunky borders or hard shadows. */
.logo .team1{font:400 9px var(--mono);letter-spacing:.18em;text-transform:uppercase;background:none;border-radius:0;padding:0;margin-left:4px;transform:none;color:var(--mute)}
.logo .team1:before{content:"· "}
.hdr-r{gap:22px}
.basketbtn{border:0;border-bottom:1px solid transparent;background:none;border-radius:0;padding:4px 0;font:700 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;gap:8px}
.basketbtn:hover{border-bottom-color:var(--ink)}
.basketbtn svg{width:16px;height:13px}
.basketbtn b{background:var(--ink);min-width:17px;height:17px;font:700 9px var(--mono);letter-spacing:0;border-radius:20px}
.navshop>a small{font-size:8px}
/* hanging tags = the original .tab tags */
.htag .str{width:1px;height:14px;background:#a9a59e}
.htag .tg,.tabs .htag .tg,.menu .mtags a .tg{border:1px solid #bdb9b2;background:#fbfaf8!important;padding:8px 14px 7px;font:700 9px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);border-radius:2px;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.htag .tg:before{top:-3px;width:4px;height:4px;margin-left:-2px;border:0;background:#d0ccc5}
.htag:hover .tg{color:var(--ink);border-color:var(--ink2)}
.tabs .htag.on .tg{background:var(--ink)!important;color:#fff;border-color:var(--ink)}
.tabs .htag.on .tg:before{background:#555}
.tabs{border-top:0;padding-top:16px;margin-top:0;align-items:flex-start;gap:14px}
.tabs .htag .str{position:absolute;top:-14px;height:13px}
.htag:hover{animation:swing-soft 2.4s ease-in-out}
.navshop:hover .dd-tags .htag,.navshop:focus-within .dd-tags .htag{animation:tag-in .5s ease-out both;animation-delay:var(--d)}
.navshop:hover .dd-tags .htag:hover{animation:swing-soft 2.4s ease-in-out}
@keyframes swing-soft{0%,100%{transform:rotate(0)}25%{transform:rotate(3deg)}55%{transform:rotate(-2deg)}80%{transform:rotate(.8deg)}}
@keyframes tag-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.dd-in{border-radius:3px;box-shadow:var(--shadow),0 18px 40px rgba(0,0,0,.08);padding:20px 26px 24px;background:var(--paper)}
.dd-rod{height:2px;border-radius:0;background:#a9a59e;box-shadow:none}
.dd-tags{gap:4px 12px;margin-top:0}
.dd-side a{font:400 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;padding:6px 0}
.dd-side a:hover{color:var(--ink)}
.dd-side .dd-all{font-weight:700}
.mtags{border-top:1px solid #a9a59e;border-radius:0;padding-top:0}
.menu .mpieces a{font:400 9.5px var(--mono)!important;letter-spacing:.16em;text-transform:uppercase;border-radius:30px}
/* hero photo + speech bubble (the original chat-card look, but a speech bubble) */
.hero-photo .slot{border:1px dashed #b3aea6;border-radius:3px;background:rgba(255,255,255,.25)}
.hero-photo .slot .mono{color:#a7a39c}
.bubble{border:0;border-radius:16px;box-shadow:var(--shadow);padding:14px 18px 12px;animation:floaty 6s ease-in-out infinite}
.bubble .bt{font:600 clamp(19px,1.8vw,23px)/1.2 var(--hand);color:var(--ink)}
.bubble small{font:400 8.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-top:6px}
.bubble:before,.bubble:after{border:0;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.bubble:before{width:16px;height:16px;left:26px;bottom:-20px}
.bubble:after{width:9px;height:9px;left:14px;bottom:-33px}
.bubble:hover{transform:translateY(-2px)}
/* rack */
.racksec .hero-vis{border-radius:2px}
/* lineup, bench, call-ups */
.lineup{background:none}
.callups{background:var(--paper2)}
.starters .tile,.bench .tile,.cu-row .tile,.tile{border-radius:0;box-shadow:none}
.starters .tile{box-shadow:var(--shadow)}
.tile .jno{width:auto;height:auto;border-radius:0;background:none;color:var(--ink);box-shadow:none;font:italic 800 26px/1 var(--serif);left:12px;top:10px}
.tile .jno:after{content:"/";font-style:normal;font-weight:400;color:var(--mute)}
.bench .tile{transform:none}.bench .tile:nth-child(even){transform:none}
.plank{height:8px;left:0;right:0;border-radius:1px;background:linear-gradient(#c7a77e,#b08d62);box-shadow:0 4px 8px rgba(0,0,0,.08)}
.benchwrap{padding-bottom:14px}
.cu-row .tile{border:0;box-shadow:var(--shadow)}
.cu-row .tile .cap .mono{color:var(--red)}
.nick{font:600 19px/1.1 var(--hand);color:var(--ink2)}
.pv-nick{color:var(--ink2);transform:none}
.ed-fields{font:12.5px var(--sans)}
.ed-fields .ef{border-radius:2px}
.addcard{border-radius:3px}
/* shop rack */
.br-rod{height:3px;border-radius:0;background:#8d8981;box-shadow:0 2px 3px rgba(0,0,0,.1)}
.br-hook{width:18px;height:22px;border-width:2px;border-color:#9b968e;border-radius:10px 10px 0 0;margin-top:-1px}
.br-hook:after{width:2px;height:10px;bottom:-10px;margin-left:-1px;background:#9b968e}
.br-card{border-radius:0;box-shadow:var(--shadow);margin-top:10px}
.br-tag .mono{font-size:8.5px;color:var(--mute)}
.brh{animation:none}
.brh:hover{animation:none}
.brh .br-card{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.brh:hover .br-card{transform:translateY(-4px)}
.rackhint{font-size:20px}
.cityf .mono{font-weight:700}
.cityf select{font:15px var(--sans);border:1px solid var(--line);border-radius:3px;padding:12px 14px}
.emptyteam{border:1px dashed #bdb9b2;border-radius:3px;background:#fbfaf8}
.et-ico{background:var(--paper2)}
.emptyteam .btn{cursor:pointer}
/* piece view */
.pv-main,.pv-img{border-radius:0}
.pv-cap{font-size:8.5px;border-radius:2px}
.pv-th{border-radius:0;border-width:1px;font:400 8.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;box-shadow:none;border-color:var(--line)}
.pv-th.on{border-color:var(--ink)}
.slot2{border-radius:0}.slot2 .ph{border-radius:0}
.pv-specs{border-radius:3px}
.pv-specs .mono{font-weight:700}
.fm{border-radius:2px;background:var(--paper2)}
.fm i{font:400 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;border-radius:2px;padding:9px 4px}
.teamchips span{font:400 9px var(--mono);letter-spacing:.16em;text-transform:uppercase;background:none;border:1px solid var(--line);border-radius:30px;padding:5px 10px}
.pv-price{font:14px var(--sans)}
.pv-price small{font-size:12px}
.btn.love{background:var(--ink);font-size:10.5px;padding:17px 24px}
.btn.love:hover{transform:translateY(-1px)}
.love-wrap{position:relative;display:inline-block}
.love-arrow{position:absolute;left:100%;top:-26px;margin-left:10px;color:var(--ink2);display:flex;flex-direction:column;align-items:flex-start;pointer-events:none;white-space:nowrap}
.love-arrow .hand{font-size:20px;transform:rotate(-4deg);margin-left:22px}
.love-arrow svg{transform:scaleX(-1) rotate(-30deg)}
@media (max-width:520px){.love-arrow{left:auto;right:4px;top:-44px}.love-arrow svg{display:none}}
.mine{border:0;border-radius:0;box-shadow:var(--shadow);position:relative}
.mine:before{content:"";position:absolute;top:-7px;left:40px;width:70px;height:15px;background:rgba(243,228,138,.85);transform:rotate(-3deg)}
.mine h3{font:800 24px var(--serif)}
.chip small{color:var(--mute);font-size:10px}
.tiny{font:400 9px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase}
/* drawer, modals, controls */
.x{border:1px solid var(--line);font-size:20px;font-weight:300}
.dr-head h3{font:800 26px var(--serif);font-style:normal}
.dr-item{border-radius:0}
.dr-item b{font:600 15px var(--serif)}
.seg button{border:1px solid var(--line);border-radius:30px;padding:10px 13px;font:12.5px var(--sans)}
.modal{border-radius:2px;animation:modal-in .3s ease-out}
@keyframes modal-in{from{opacity:0;margin-top:8px}}
.notecard{border-top:0;transform:translate(-50%,-50%)}
.notecard:before{content:"";position:absolute;top:-7px;left:50%;width:80px;height:15px;margin-left:-40px;background:rgba(243,228,138,.85);transform:rotate(-2deg)}
.notecard .hand.big{font-size:28px}
.pk{border-radius:2px;border-width:1px;font:12px var(--sans)}
.pk.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
/* order board, in the original builder style */
.ob .prog{max-width:none;margin:8px 0 0;gap:4px}
.ob .prog i{height:2px;border-radius:0;background:var(--line)}.ob .prog i.on{background:var(--ink)}
.ob-top{color:var(--mute)}
.bigbtn{border:1px solid var(--line);background:#f8f7f4;border-radius:3px;box-shadow:none;padding:22px 20px;min-height:120px;justify-content:flex-end}
.bigbtn:before{content:"";position:absolute;left:20px;top:20px;width:8px;height:8px;border-radius:50%;background:#cfcbc4;transition:.15s}
.bigbtn:hover{border-color:#bdb9b2;background:#fff;transform:none;box-shadow:none}
.bigbtn:active{transform:none;box-shadow:none}
.bigbtn.on{border-color:var(--ink);background:#fff;box-shadow:var(--shadow)}
.bigbtn.on:before{background:var(--ink);box-shadow:0 0 0 4px rgba(0,0,0,.08)}
.bigbtn strong{font:600 20px/1.2 var(--serif)}
.bigbtn span{font-size:12px;color:var(--mute)}
.bigbtns.two .bigbtn,.bigbtns.two .bigbtn:first-child{background:#f8f7f4;min-height:200px}
.bigbtns.two .bigbtn:hover{background:#fff}
.bigbtns.two .bigbtn strong{font:italic 800 clamp(24px,2.6vw,32px)/1.05 var(--serif)}
.bigbtns.two.sm .bigbtn{min-height:110px}
.bigbtns.two.sm .bigbtn strong{font:600 20px var(--serif)}
.bb-ico{display:none}
.bigbtn.sm{min-height:0}
.pinboard{background:var(--paper2);border:1px solid var(--line);border-radius:2px;box-shadow:0 8px 20px rgba(0,0,0,.05);padding:12px 14px 14px}
.pb-head{color:var(--ink)}.pb-head b{font-size:22px}.pb-head .mono{color:var(--mute)}
.pb-empty{color:var(--ink2)}
.pin2{border-radius:0;padding:12px 8px 8px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 6px 16px rgba(0,0,0,.06);transform:rotate(-.8deg);animation:pinin .35s ease-out}
.pin2:nth-child(even){transform:rotate(.7deg)}
.pin2:before{top:-6px;width:46px;height:13px;margin-left:-23px;border-radius:0;background:rgba(243,228,138,.85);box-shadow:none}
.pin2 span{font:600 13px/1.2 var(--serif)}
.pin2 .x{width:24px;height:24px;font-size:15px}
.mz{border-radius:0;box-shadow:0 1px 2px rgba(0,0,0,.05),0 6px 16px rgba(0,0,0,.05)}
.mz.on{box-shadow:0 0 0 1px var(--ink),var(--shadow)}
.mz-pin{background:#fff;color:var(--ink);border-radius:2px;font:700 8.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;box-shadow:var(--shadow)}
.mz.on .mz-pin{background:var(--ink);color:#fff}
.mz-cap b{font:600 15px var(--serif)}
.mz-cap small{font:400 8.5px var(--mono);letter-spacing:.16em;text-transform:uppercase}
.mz-cap .nick{font-size:16px}
.ob-nav .back{font:700 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink2)}
.ob-est .mono{font-size:8.5px}
.summary{border:0;border-radius:0;box-shadow:var(--shadow);position:relative}
.summary:before{content:"";position:absolute;top:-7px;left:40px;width:70px;height:15px;background:rgba(243,228,138,.85);transform:rotate(-3deg)}
.flyer{border-radius:2px;animation:fly 1.1s cubic-bezier(.45,0,.4,1) both;animation-delay:calc(var(--i) * 160ms)}
.stk.onenv span{animation:stick-soft .5s ease-out both;animation-delay:calc(1.2s + var(--i) * 140ms)}
@keyframes stick-soft{from{opacity:0;transform:scale(.6)}}
/* sent / file / admin bits */
.sentitems div{border-radius:30px;font:13px var(--sans)}
.gbtn{border:1px solid var(--line);font-size:10.5px;padding:15px 22px;box-shadow:var(--shadow)}
.or{font:400 9px var(--mono);letter-spacing:.18em;text-transform:uppercase}
.famrow input,.famrow select{font:15px var(--sans);border-radius:3px}
.staff{border-radius:3px}
.ord .kind{font:400 8.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;background:var(--paper2);border-radius:2px}
.oitem{border-radius:2px}.oitem b{font:600 14px var(--serif)}
.tarea{font:14px/1.5 var(--sans);border-radius:3px}

/* ================= Subtle motion ================= */
/* jackets gently sway on the rack */
.hang>img{transform-origin:50% 0;animation:sway 7s ease-in-out infinite;animation-delay:calc(var(--sw, 0) * -1.7s)}
.hang:nth-child(1)>img{--sw:0}.hang:nth-child(2)>img{--sw:1}.hang:nth-child(3)>img{--sw:2}.hang:nth-child(4)>img{--sw:3}.hang:nth-child(5)>img{--sw:1.5}.hang:nth-child(6)>img{--sw:2.5}
.brh .br-card{transform-origin:50% -20px;animation:sway-sm 8s ease-in-out infinite}
.brh:nth-child(2n) .br-card{animation-delay:-2.6s}.brh:nth-child(3n) .br-card{animation-delay:-5.1s}
.brh:hover .br-card{animation-play-state:paused}
@keyframes sway{0%,100%{transform:rotate(-.9deg)}50%{transform:rotate(.9deg)}}
@keyframes sway-sm{0%,100%{transform:rotate(-.5deg)}50%{transform:rotate(.5deg)}}
.edit .hang>img,.edit .brh .br-card{animation:none}
/* soft scroll reveals (class added by JS only when motion is allowed) */
.rv{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
/* hand-drawn arrow draws itself in */
.draw path{stroke-dasharray:80;stroke-dashoffset:0}
.draw.go path:first-child{animation:draw 1s ease-out .2s both}
.draw.go path:last-child{animation:draw .4s ease-out 1.1s both}
@keyframes draw{from{stroke-dashoffset:80}}
.love-arrow .hand{animation:fadein .6s ease 1.3s both}
@keyframes fadein{from{opacity:0}}
/* shipping box: flaps open on the confirmation page */
.shipbox{position:relative;width:170px;height:118px;margin:6px 0 30px;perspective:500px}
.sb-body{position:absolute;inset:0;background:linear-gradient(#d6b98f,#caa977);border-radius:2px;box-shadow:0 10px 24px rgba(0,0,0,.12);display:grid;place-items:center}
.sb-body:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:30px;margin-left:-15px;background:rgba(243,228,138,.6)}
.sb-label{position:relative;background:#fff;padding:6px 10px;font:700 10px var(--mono);letter-spacing:.14em;transform:rotate(-2deg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.sb-flap{position:absolute;top:0;width:50%;height:46px;background:linear-gradient(#cfb083,#c3a271);border-radius:2px;backface-visibility:visible}
.sb-flap.l{left:0;transform-origin:0 0;transform:rotateX(-150deg) skewX(-6deg);animation:flapL 1.1s cubic-bezier(.3,.7,.2,1) .4s both}
.sb-flap.r{right:0;transform-origin:100% 0;transform:rotateX(-150deg) skewX(6deg);animation:flapR 1.1s cubic-bezier(.3,.7,.2,1) .55s both}
@keyframes flapL{from{transform:rotateX(0)}}
@keyframes flapR{from{transform:rotateX(0)}}
.sb-peek{position:absolute;left:50%;top:-30px;width:80px;margin-left:-40px;animation:peek .9s ease-out 1.2s both;z-index:-1}
.sb-peek img{width:100%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.15))}
@keyframes peek{from{transform:translateY(40px);opacity:0}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important}.sb-flap.l,.sb-flap.r{animation:none!important}}
.shipbox{isolation:isolate}.sb-body{z-index:1}.sb-flap{z-index:2}.sb-peek{z-index:0}

/* =====================================================================
   JORDI'S OWN DESIGN (from her reference screenshots)
   condensed uppercase sans for nav + labels · bold serif w/ italic for headings ·
   handwritten script for notes · lots of whitespace · black rectangular buttons
   ===================================================================== */
:root{--mono:'Barlow Condensed','Arial Narrow',sans-serif;--sans:'Barlow',system-ui,sans-serif;--round:'Barlow',system-ui,sans-serif;--paper:#f8f7f4;--paper2:#efede8;--line:#dedad3;--blue:#8db9f4;--yellow:#f6e27a}
body{font:16px/1.7 var(--sans);font-weight:300;background:var(--paper)}
.mono{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase}
.btn{border-radius:0;font:600 12.5px/1.25 var(--mono);letter-spacing:.16em;padding:19px 30px;text-transform:uppercase}
.btn.ghost{font:500 12px var(--mono);letter-spacing:.18em;border-bottom:0;padding:10px 0;max-width:220px;text-align:left}
.btn.light{background:#fff;color:var(--ink);box-shadow:none}
.link{font:600 12px var(--mono);letter-spacing:.16em}
/* header */
.hdr{background:rgba(255,255,255,.92);border-bottom:1px solid #ecebe7}
.hdr .wrap{height:62px}
.logo{font:500 15px var(--mono);letter-spacing:.14em;gap:12px}
.logo .arr{font-size:20px;font-weight:300}
.logo i{color:var(--ink)}
.nav{gap:38px}
.nav a{font:500 13.5px var(--mono);letter-spacing:.14em;color:#555;border-bottom:1.5px solid transparent;padding:3px 0}
.nav a.u-studio{border-bottom-color:var(--yellow)}
.nav a.u-shop{border-bottom-color:var(--blue)}
.nav a:hover,.nav a.on{color:var(--ink)}
.nav a.on:not(.u-studio):not(.u-shop){border-bottom-color:var(--ink)}
.filelink,.basketbtn{font:600 13px var(--mono);letter-spacing:.14em}
.filelink{border-bottom:1.5px solid var(--ink);padding-bottom:2px}
.basketbtn b{font:600 10px var(--mono)}
.menu a{font:italic 800 34px/1.25 var(--serif)}
/* hero */
.hero{min-height:calc(100vh - 62px);max-height:860px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:clamp(20px,5vh,50px) var(--pad) clamp(20px,5vh,50px) 0;gap:clamp(20px,5vw,80px)}
.hero-text{padding-top:20px;padding-bottom:20px}
.kicker{font:500 11.5px var(--mono);letter-spacing:.2em}
h1.big{font-size:clamp(50px,6.6vw,96px)}
.lede{font-weight:300;font-size:17px;line-height:1.75;color:#444;max-width:30em}
.ctas{gap:28px;align-items:center}
.hero-photo{background:#d8d6d2;min-height:0;border-radius:0}
.hero-photo .photo{object-position:50% 40%}
.wnote{position:absolute;z-index:3;color:#fff;font:400 clamp(20px,2vw,27px)/1.15 var(--hand);text-shadow:0 1px 8px rgba(0,0,0,.25);max-width:46%}
.wnote.w1{left:13%;top:12%;transform:rotate(-4deg)}
.wnote.w2{right:6%;top:41%;transform:rotate(3deg);max-width:34%}
.ctag{position:absolute;z-index:3;right:5%;bottom:5%;background:#fff;width:min(170px,34%);aspect-ratio:1.3;padding:16px;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.ctag .hand{font-size:18px;color:var(--ink)}
.bubble{left:6%;top:auto;bottom:7%;right:auto;max-width:min(260px,52%);border-radius:14px 14px 14px 4px}
.bubble:before,.bubble:after{display:none}
.bubble .bt{font-size:clamp(18px,1.6vw,21px)}
.bubble small{font:500 10px var(--mono);letter-spacing:.16em}
@media (max-width:900px){.hero{grid-template-columns:1fr;padding:0;max-height:none}.hero-photo{aspect-ratio:4/4.6;margin:0 var(--pad) 30px}.wnote{font-size:20px}.bubble{max-width:60%}}
/* section heads */
h2.title{font:italic 800 clamp(38px,4.6vw,60px)/1 var(--serif);max-width:12ch}
.kick2{color:#9a978f}
.aside{font:400 21px var(--hand);color:#2d4f9e;transform:none}
.aside.sm{font-size:18px}
/* hanging-card products (cutouts on hangers) */
.hcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(18px,3vw,40px) clamp(14px,2.4vw,28px);padding:10px 0 20px}
.hcs.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.hcs.small{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.hc{position:relative;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink);padding-top:26px}
.hc-hook{position:absolute;top:0;left:50%;width:22px;height:28px;margin-left:-11px;border:1.5px solid #8b8780;border-bottom:0;border-radius:12px 12px 0 0}
.hc-hook:after{content:"";position:absolute;left:50%;bottom:-8px;width:1.5px;height:8px;background:#8b8780;margin-left:-.75px}
.hc-img{width:100%;aspect-ratio:1/1.05;display:grid;place-items:center;transform-origin:50% -26px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hc-img img{max-width:92%;max-height:92%;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(0,0,0,.14))}
.hc-img .mono{color:#bbb}
.hc:hover .hc-img{transform:translateY(-4px)}
.hc-cap{width:100%;text-align:center;margin-top:8px;display:flex;flex-direction:column;gap:2px}
.hc-cap .mono{color:#9a978f;font-size:11px}
.hc-cap b{font:700 19px/1.15 var(--serif)}
.hc-cap .nick{font-size:18px;color:#2d4f9e}
.hc.sm .hc-cap b{font-size:15px}.hc.sm .hc-cap .mono{display:none}
.hc.sm{padding-top:20px}.hc.sm .hc-hook{width:16px;height:20px;margin-left:-8px}
.hcs .hc .hc-img{animation:sway-sm 9s ease-in-out infinite;animation-delay:calc(var(--i) * -1.9s)}
.hc:hover .hc-img{animation-play-state:paused}
@media (max-width:900px){.hcs.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hcs{grid-template-columns:repeat(2,minmax(0,1fr))}.hc-cap b{font-size:16px}}
/* home: lineup peek */
.peek{padding:clamp(60px,9vw,120px) 0 clamp(40px,6vw,80px)}
.peek-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.peek-cta{text-align:center;margin-top:28px}
/* calculator section */
.calc-sec{display:grid;grid-template-columns:1fr 1fr;background:#121212;color:#fff;margin:clamp(40px,6vw,80px) 0}
.calc-l{padding:clamp(48px,7vw,90px) clamp(24px,7vw,72px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;border-right:1px solid #2a2a2a}
.calc-l h2{font:italic 800 clamp(30px,3.2vw,42px)/1.12 var(--serif);margin:0 0 18px;max-width:14ch}
.calc-l p{color:#a9a6a0;font-size:15.5px;max-width:34em;margin:0 0 30px}
.calc-r{background:#1a1a1a;display:grid;place-items:center;padding:50px 20px}
@media (max-width:800px){.calc-sec{grid-template-columns:1fr}.calc-l{border-right:0}}
/* shop rail with paper tabs */
.rail{position:relative;height:96px;overflow:hidden;background:var(--paper);border-bottom:1px solid #e3e0da}
.rail-bar{position:absolute;left:var(--pad);right:var(--pad);top:0;height:5px;background:#c9c5bf;border-radius:0 0 2px 2px;z-index:2}
.rail-row{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-start;gap:clamp(18px,3vw,44px);padding:0 var(--pad);transition:transform .55s cubic-bezier(.6,0,.3,1),opacity .45s}
.r-colls{transform:translateX(105%);opacity:0;pointer-events:none}
.rail.is-colls .r-types{transform:translateX(-105%);opacity:0;pointer-events:none}
.rail.is-colls .r-colls{transform:none;opacity:1;pointer-events:auto}
.ptab{position:relative;flex:none;margin-top:16px;text-decoration:none;transform-origin:50% -16px}
.ptab:before{content:"";position:absolute;left:50%;top:-16px;width:1px;height:16px;background:#a8a49d}
.ptab span{display:block;background:#fff;border:1px solid #c9c6c0;padding:11px 18px 10px;font:600 11.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#333;box-shadow:0 2px 4px rgba(0,0,0,.08);white-space:nowrap}
.ptab:nth-child(odd) span{transform:rotate(-1.6deg)}.ptab:nth-child(even) span{transform:rotate(1.3deg)}
.ptab.on span{border:2px solid var(--ink);color:var(--ink);transform:none}
.ptab.blue span{background:var(--blue);border-color:var(--blue);color:#13284d}
.ptab.back span{color:#999}
.ptab:hover{animation:swing-soft 2.4s ease-in-out}
@media (max-width:760px){
  .rail{height:88px}
  .rail-row{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:16px;padding-right:40px;-webkit-overflow-scrolling:touch}
  .rail-row::-webkit-scrollbar{display:none}
  .ptab{scroll-snap-align:center}
  .rail-bar{left:0;right:0}
}
.shopbody{padding-top:36px;padding-bottom:30px}
#shopgrid{transition:opacity .23s ease,transform .23s ease}
#shopgrid.out{opacity:0;transform:translateY(8px)}
.fadeaway{opacity:0;transition:opacity .4s ease}
.minis{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);margin-top:50px;padding-top:36px;border-top:1px solid var(--line)}
.mini-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:30px 0 4px}
.minis .mini-h{margin-top:0}
.benchh{font:italic 800 clamp(24px,2.6vw,32px) var(--serif)}
@media (max-width:760px){.minis{grid-template-columns:1fr}}
.lu-head{margin-bottom:10px}
.dontsee{text-align:center;padding:clamp(60px,8vw,110px) 0}
.dontsee h2{font:italic 800 clamp(28px,3.4vw,40px)/1.1 var(--serif);margin:0 0 12px}
.dontsee p{color:#666;margin:0 auto 28px;max-width:34em}
/* collections: clothespin bar + polaroids */
.collsec{padding-top:40px}
.line:before{height:4px;background:#c9c5bf;border-radius:2px}
.pol .card{padding:10px 10px 18px}
.pol h3{font:italic 700 22px var(--serif)}
.pol .num{font:500 11px var(--mono);letter-spacing:.16em}
.collsec .aside{color:#2d4f9e}
/* collection page under the rail */
.coll{padding-top:40px}
.coll-side h1{font:italic 800 clamp(34px,4vw,52px)/1 var(--serif)}
.collnote{color:#2d4f9e}
/* product cards (tiles) */
.tile .cap{font:600 16px var(--serif)}
.tile .cap .mono{font-size:11px}
.nick{color:#2d4f9e}
/* product page */
.pv-info h1{font:800 clamp(36px,4.4vw,56px)/1 var(--serif)}
.pv-nick{color:#2d4f9e}
.pv-main{background:#fff}
.pv-main .ph.art img{padding:8%}
.btn.love{font-size:12.5px;padding:19px 30px}
.love-arrow .hand{color:#2d4f9e}.love-arrow{color:#2d4f9e}
.shipbox.mini{width:120px;height:80px;margin:4px 0 22px}
.shipbox.mini .sb-flap{height:30px}
.shipbox.mini .sb-label{font-size:9px}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:#444;margin:14px 0 6px;cursor:pointer}
.agree input{width:18px;height:18px;margin-top:2px;accent-color:var(--ink);flex:none}
/* order board & misc controls */
h2.q{font:italic 800 clamp(34px,5vw,56px)/1.02 var(--serif)}
.bigbtn strong{font-family:var(--serif)}
.field>span{font:600 11.5px var(--mono);letter-spacing:.16em}
.field input,.field textarea,.field select{border-radius:0;font:16px var(--sans)}
.chip,.seg button{font:500 13px var(--sans)}
.tl li{font:500 12px var(--mono);letter-spacing:.12em}
.step b{font:600 14px/1.35 var(--mono);letter-spacing:.12em}
.step p{font:400 13.5px/1.6 var(--sans)}
footer .mono{font-size:11.5px}
.fab .btn{font-size:12px}
#toast{font:500 13px var(--sans);border-radius:0}
.editbar{font:600 12px var(--mono);letter-spacing:.12em}
.ed-img button,.ed-x,.ed-h,.ed-c{font:600 11px var(--mono);letter-spacing:.1em}
.addcard{font:600 12px var(--mono);letter-spacing:.14em}
.atabs button,.counts button{font:600 12px var(--mono);letter-spacing:.12em}
.dd-side a{font:500 13px var(--mono);letter-spacing:.14em}
.htag .tg,.menu .mtags a .tg{font:600 11px var(--mono);letter-spacing:.16em;background:#fff!important}
.ph span{font:500 10px/1.7 var(--mono);letter-spacing:.2em}
/* ---- Collections tab: playful idle "tease" (pauses on hover; off for reduced motion) ---- */
.ptab.blue span{animation:tease 4.2s cubic-bezier(.3,.7,.3,1) 1.2s infinite;transform-origin:50% 0}
.ptab.blue:hover span{animation-play-state:paused}
.ptab.blue:hover{animation:none}
@keyframes tease{0%,72%,100%{translate:0 0;scale:1}78%{translate:0 -6px;scale:1.08}84%{translate:0 0;scale:1.03}89%{translate:0 -2px;scale:1.05}94%{translate:0 0;scale:1}}
/* ---- The Starting Lineup carousel (Keepers style) ---- */
.keepers{padding:clamp(34px,5vw,60px) 0 clamp(30px,4vw,50px);border-bottom:1px solid #e3e0da}
.k-head .kick2{margin-bottom:4px}
.k-title{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.k-title h2.title{max-width:none}
.k-note{display:flex;align-items:center;gap:6px;color:#23338f;transform:rotate(-5deg);margin-bottom:8px}
.k-note .hand{font-size:22px;line-height:1.1;max-width:15ch}
.car{position:relative;height:clamp(380px,44vw,520px);margin-top:10px;overflow:hidden}
.car-track{position:absolute;inset:0}
.car-slide{position:absolute;left:50%;top:0;width:min(360px,62vw);height:calc(100% - 50px);text-decoration:none;color:var(--ink);transform:translateX(calc(-50% + var(--d,0) * min(30vw,400px))) scale(var(--s,1));transform-origin:50% 40%;transition:transform .7s cubic-bezier(.3,.7,.2,1),opacity .6s ease;display:flex;flex-direction:column;align-items:center}
.car-no{align-self:flex-start;color:#555;font-size:12px;margin-bottom:6px}
.car-box{position:relative;flex:1;width:100%;display:grid;place-items:center;padding:30px 8% 6px}
.car-slide:not(.on) .car-box{border:1px solid #e2dfd9;background:rgba(255,255,255,.4)}
.car-box .hc-hook{top:4px}
.car-box img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(0,0,0,.16))}
.car-slide.on .car-box img{animation:sway-sm 9s ease-in-out infinite;transform-origin:50% -10px}
.car-cap{text-align:center;opacity:0;transition:opacity .4s;margin-top:6px}
.car-slide.on .car-cap{opacity:1}
.car-cap b{display:block;font:700 18px var(--serif)}.car-cap .nick{font-size:18px}
.car-btn{position:absolute;top:42%;z-index:20;width:42px;height:42px;background:#fff;border:1px solid #d6d3cd;display:grid;place-items:center;color:var(--ink)}
.car-btn.prev{left:max(3vw,12px)}.car-btn.next{right:max(3vw,12px)}
.car-btn:hover{border-color:var(--ink)}
.car-dots{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:8px;z-index:20}
.car-dots button{width:6px;height:6px;border-radius:50%;border:0;padding:0;background:#cfccc6}
.car-dots button.on{background:var(--ink)}
@media (max-width:600px){.car{height:440px}.car-slide{width:72vw;transform:translateX(calc(-50% + var(--d,0) * 64vw)) scale(var(--s,1))}.car-btn{top:38%;width:36px;height:36px}}
/* ---- Shop by Category: panels (Jordi's dark gradient panels) ---- */
.cats{padding:clamp(44px,6vw,80px) 0 30px}
.rule{display:flex;align-items:center;gap:14px}.rule:before{content:"";width:32px;height:1px;background:#bbb}
.cats h2.title{max-width:none;margin-bottom:26px}
.cat-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);overflow-x:auto;scrollbar-width:thin;border-top:1px solid #ddd;border-bottom:1px solid #ddd}
.cat{position:relative;display:block;min-height:clamp(300px,30vw,400px);text-decoration:none;color:#fff;background:linear-gradient(180deg,#262626,#121212);border-right:1px solid #3a3a3a;overflow:hidden}
.cat:nth-child(3n+2){background:linear-gradient(180deg,#3a3a3a,#141414)}
.cat:nth-child(3n){background:linear-gradient(180deg,#d6d1ca 0%,#c9c4bc 55%,#4a4743 100%)}
.cat-img{position:absolute;left:50%;top:14%;width:70%;max-height:46%;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 18px 24px rgba(0,0,0,.35));transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.cat:hover .cat-img{transform:translateX(-50%) translateY(-6px)}
.cat-txt{position:absolute;left:clamp(18px,2.4vw,32px);right:16px;bottom:clamp(20px,2.6vw,34px)}
.cat-txt .mono{color:rgba(255,255,255,.55);font-size:11px}
.cat-txt h3{font:700 clamp(28px,2.8vw,40px)/1.02 var(--serif);margin:6px 0 4px}
.cat-sub{display:block;font-size:20px;color:rgba(255,255,255,.8)}
.cat:after{content:"";position:absolute;left:clamp(18px,2.4vw,32px);bottom:14px;height:2px;width:0;background:#fff;transition:width .4s}
.cat.on:after,.cat:hover:after{width:44px}
.cat.on{box-shadow:inset 0 -4px 0 var(--blue)}
.edit .cat{color:#fff}
/* products + left city filter */
.catwrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,4vw,56px);padding-top:40px;padding-bottom:20px;position:relative}
.cityside{position:sticky;top:80px;align-self:start;max-height:calc(100vh - 100px);overflow:auto}
.cl-h{color:var(--ink);font-weight:600;margin-bottom:10px}
.cl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cl li button{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:10px 2px;font:400 15px var(--sans);color:#555;display:flex;justify-content:space-between}
.cl li button:hover{color:var(--ink)}
.cl li button.on{color:var(--ink);font-weight:500}
.cl li button.on:after{content:"●";font-size:8px;color:var(--blue);align-self:center}
.cityclose,.cityscrim,.cityopen{display:none!important}
.ca-top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.ca-top .mono{color:#9a978f}
#catarea{transition:opacity .22s ease,transform .22s ease;min-width:0}
#catarea.out{opacity:0;transform:translateY(8px)}
@media (max-width:820px){
  .catwrap{grid-template-columns:1fr}
  .cityopen{display:inline-flex!important;margin-left:auto;border:1px solid var(--ink)!important;padding:10px 14px!important}
  .cityside{position:fixed;top:0;left:0;bottom:0;width:min(320px,86vw);max-height:none;background:var(--paper);z-index:85;padding:24px 22px;transform:translateX(-102%);transition:transform .35s cubic-bezier(.2,.8,.2,1);box-shadow:12px 0 40px rgba(0,0,0,.15)}
  .cityside{height:100vh;height:100dvh;overflow-y:auto}
  .cityside.open{transform:none}
  .cityclose{display:grid!important;position:absolute;right:14px;top:14px}
  .cityscrim{display:block!important;z-index:84}
  .cat-grid{grid-auto-columns:62vw}
}
/* collections one-liners */
.collline{font:italic 600 clamp(19px,1.8vw,23px)/1.3 var(--serif);color:var(--ink);margin:6px 0 4px!important}
.pol-line{margin:4px 0 0;font-size:13px;line-height:1.4;color:#777}
.edit .shopbody,.edit .catwrap{padding-top:20px}
@media (max-width:820px){.r-types .ptab.blue{position:sticky;right:4px;z-index:3;margin-left:auto}.r-types .ptab.blue span{box-shadow:-10px 4px 14px rgba(246,244,240,.95),0 2px 4px rgba(0,0,0,.12)}}
.cat .ed-tools button:not(.ed-x),.cat .ed-img button{color:#1b1b1b}.cat .ed-tools{z-index:4}
.nav a.u-art{border-bottom-color:var(--blue)}
.nav a.on:not(.u-studio):not(.u-shop):not(.u-art){border-bottom-color:var(--ink)}
.nav a.u-shop.on,.nav a.u-art.on{border-bottom-width:2.5px}
.nav{gap:clamp(18px,2.4vw,38px)}
.dd.art .dd-in{grid-template-columns:1fr auto}
.nav [data-edit]{cursor:text}
/* ---- "Make it mine" panel (clean, editorial) ---- */
.mm{margin:30px 0 6px;max-width:460px}
.mm-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mm-btn{padding:17px 26px;font-size:14px;letter-spacing:.18em;gap:14px}
.mm-chev{display:inline-block;transition:transform .3s}
.mm-btn:hover .mm-chev{transform:translateX(4px)}
.mm-note{display:flex;align-items:center;gap:4px;color:#2d4f9e;transform:rotate(-3deg)}
.mm-note .hand{font-size:23px;line-height:1;white-space:nowrap;animation:fadein .6s ease 1s both}
.mm-note svg{flex:none}
.mm-form{display:block;max-height:0;overflow:hidden;opacity:0;margin-top:18px;border-top:1px solid #1b1b1b;padding-top:0;transition:max-height .55s cubic-bezier(.3,.7,.2,1),opacity .35s ease,padding .45s}
.mm-form.in{max-height:1400px;opacity:1;padding-top:22px}
.mm-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.mm-h h3{font:italic 800 26px/1.1 var(--serif);margin:0}
.mm-close{background:none;border:0;font-size:11px;letter-spacing:.14em;color:#888;border-bottom:1px solid #ccc;padding:0 0 2px}
.mm-close:hover{color:var(--ink)}
.mm-form .row2{display:grid;grid-template-columns:1fr 110px;gap:12px}
.mm-add{width:100%;justify-content:center;margin-top:10px;padding:16px 18px}
.mm-form .tiny{margin:12px 0 0;color:#888}
@media (max-width:520px){.mm-btn{width:100%;justify-content:center}.mm-note{margin-left:auto}}
@media (prefers-reduced-motion:reduce){.mm-form{transition:none}.mm-note .hand{animation:none}}
.catnote{font-size:22px;color:#2d4f9e;margin:0 0 14px;transform:rotate(-1deg);transform-origin:left}
.hidbadge{font-size:10.5px;letter-spacing:.12em;color:#b44;margin:6px 0}
.pol.is-hidden .card,.ptab.is-hidden span{opacity:.55;border-style:dashed}

/* ---- no faux objects: plain paper card for messages, no tape on pins, clean pack card ---- */
.notecard{background:#fff!important;border:1px solid #e5e1da}
.notecard:before{display:none!important}
.pin2:before{display:none!important}
.packcard{position:relative;z-index:3;width:min(380px,86vw);background:#fff;border:1px solid #e5e1da;box-shadow:0 20px 40px -20px rgba(0,0,0,.25);padding:20px 22px 18px;text-align:center}
.pc-h{color:#888;font-size:11px;margin-bottom:12px}
.pc-to{display:block;font-size:24px;color:#2d4f9e;margin-top:10px}
.done-peek{display:block;width:150px;height:150px;object-fit:contain;margin:0 0 18px;filter:drop-shadow(0 14px 18px rgba(0,0,0,.14))}
/* =====================================================================
   POLISH PASS — founder-forward, two clear paths, Kids Lab
   ===================================================================== */
.lu-cta{display:flex;justify-content:center;padding:6px var(--pad) clamp(40px,6vw,70px)}
/* founder */
.founder{padding:clamp(60px,8vw,110px) 0;border-top:1px solid #e3e0da}
.fd-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.fd-photos{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.fd-ph{margin:0;position:relative}
.fd-ph .ph,.fd-ph img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.fd-ph.f1{margin-top:60px}
.fd-ph figcaption{font-size:21px;color:#2d4f9e;margin-top:10px;line-height:1.15;transform:rotate(-2deg)}
.fd-text h2.title{margin:6px 0 18px}
.fd-text .lede{max-width:46ch}
.fd-sign{font-size:34px;margin:14px 0 18px;color:var(--ink)}
.txtlink{background:none;border:0;padding:0 0 2px;border-bottom:1.5px solid var(--ink);font:600 12.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);cursor:pointer;text-decoration:none}
@media (max-width:820px){.fd-grid{grid-template-columns:1fr}.fd-ph.f1{margin-top:36px}}
/* two paths */
.paths{padding:clamp(56px,7vw,100px) 0;background:#fff;border-top:1px solid #e3e0da;border-bottom:1px solid #e3e0da}
.paths h2.title{max-width:none;margin:6px 0 30px}
.pt-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,30px)}
.pt{display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:var(--ink);border:1px solid #e3e0da;background:var(--paper);transition:border-color .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.pt:hover{border-color:var(--ink);transform:translateY(-3px)}
.pt-img{height:clamp(220px,24vw,320px);display:grid;place-items:center;overflow:hidden;position:relative}
.pt-img>img{max-height:86%;max-width:70%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(0,0,0,.16))}
.pt-img.pins{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:26px;align-items:center}
.pt-img.pins img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#fff;border:1px solid #e3e0da;box-shadow:0 8px 16px -10px rgba(0,0,0,.3);transform:translateY(calc((var(--i) - 1.5) * 6px)) rotate(calc((var(--i) - 1.5) * 2deg))}
.pt-txt{padding:22px clamp(18px,2.4vw,30px) 26px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;border-top:1px solid #e3e0da}
.pt-txt .mono{color:#999;font-size:11px}
.pt-txt h3{font:italic 800 clamp(26px,2.6vw,34px)/1.05 var(--serif);margin:0}
.pt-txt p{margin:4px 0 14px;color:#555;max-width:42ch}
.pt-txt .btn{margin-top:auto}
@media (max-width:760px){.pt-grid{grid-template-columns:1fr}}
/* Kids Lab teaser + shared box stage */
.klt{padding:clamp(56px,7vw,100px) 0}
.klt-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,70px);align-items:center}
.klt-img{position:relative;display:block}
.klt-img>img,.kl-box{width:100%;display:block;-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 52%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 52%,#000 62%,transparent 100%)}
.kl-pops{position:absolute;left:30%;right:26%;top:24%;height:36%;pointer-events:none}
.kl-pops img{position:absolute;bottom:0;width:34%;left:calc(var(--i) * 22% - 4%);filter:drop-shadow(0 10px 14px rgba(0,0,0,.18));transform:rotate(calc((var(--i) - 1.5) * 9deg));transform-origin:50% 100%;animation:kl-pop .9s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(.35s + var(--i) * .14s)}
.kl-pops img:nth-child(2),.kl-pops img:nth-child(3){bottom:16%}
@keyframes kl-pop{from{transform:translateY(70%) rotate(0) scale(.7);opacity:0}}
@media (max-width:820px){.klt-grid{grid-template-columns:1fr}}
/* Kids Lab page */
.kl{padding:clamp(28px,4vw,56px) 0 clamp(60px,8vw,100px)}
.kl-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,5vw,70px);align-items:center}
.kl-grid.pick{grid-template-columns:1fr minmax(320px,440px);align-items:start}
.kl-stage{position:relative}
.kl-h{font:800 clamp(40px,5.4vw,72px)/.98 var(--serif);letter-spacing:-.02em;margin:8px 0 16px}
.kl-h.hand-h{font:400 clamp(44px,5.6vw,74px)/1 var(--hand);letter-spacing:0}
.kl-note{font-size:24px;color:#2d4f9e;transform:rotate(-2deg);transform-origin:left;margin:4px 0 18px}
.kl-q{margin:26px 0 12px;color:var(--ink)}
.kl-sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kl-size{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:18px 16px 16px;background:#fff;border:1px solid #ddd8d0;text-align:left;cursor:pointer;transition:border-color .25s,transform .3s}
.kl-size b{font:800 46px/1 var(--serif)}
.kl-size span{font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase}
.kl-size small{color:#888;font-size:12.5px;margin-top:4px}
.kl-size:hover,.kl-size.on{border-color:var(--ink);transform:translateY(-2px)}
.kl-size.on{box-shadow:inset 0 -3px 0 var(--ink)}
.kl-pieces{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-top:18px}
.kl-pc{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:#fff;border:1px solid #e3e0da;padding:12px 12px 14px;text-align:left;cursor:pointer;transition:border-color .25s,transform .3s}
.kl-pc:hover:not([disabled]){border-color:var(--ink);transform:translateY(-2px)}
.kl-pc[disabled]{opacity:.5;cursor:default}
.kl-pc-img{width:100%;aspect-ratio:1;display:grid;place-items:center;margin-bottom:8px}
.kl-pc-img img{max-width:92%;max-height:92%;object-fit:contain}
.kl-pc b{font:700 16px/1.2 var(--serif)}.kl-pc small{color:#999;font-size:12px}
.kl-pc-add{margin-top:8px;font-size:11px;border-bottom:1.5px solid var(--ink)}
.kl-aside{position:sticky;top:84px}
.kl-count{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:4px 0 12px}
.kl-count .hand{color:#2d4f9e;font-size:20px}
.kl-close{width:100%;justify-content:center;padding:16px}
.kl-close[disabled]{background:#cfcac2;border-color:#cfcac2;cursor:default}
.kl-stk{position:absolute;width:15%;aspect-ratio:1;margin:-7.5% 0 0 -7.5%;border-radius:50%;background:#fff;border:3px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.22);padding:4px;cursor:pointer;transform:rotate(var(--r));transition:transform .25s}
.kl-stk img{width:100%;height:100%;object-fit:contain;border-radius:50%}
.kl-stk b{position:absolute;right:-6px;top:-6px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font:700 10px/20px var(--mono);text-align:center}
.kl-stk:hover,.kl-stk.on{transform:rotate(0) scale(1.08);z-index:3}
.kl-stk.on{border-color:#2d4f9e}
.kl-stk.drop{animation:kl-drop .7s cubic-bezier(.3,1.5,.5,1) both}
@keyframes kl-drop{from{transform:translateY(-140%) rotate(-25deg) scale(1.3);opacity:0}}
.kl-pop{position:absolute;left:50%;top:6%;transform:translateX(-50%);z-index:6;width:min(280px,90%);background:#fff;border:1px solid #1b1b1b;padding:16px 18px 14px;box-shadow:0 18px 40px -16px rgba(0,0,0,.35);animation:fadein .25s ease both}
.kl-pop h4{font:700 19px/1.15 var(--serif);margin:4px 0 10px}
.kl-pop>div:not(.mono){display:flex;justify-content:space-between;gap:12px;border-top:1px solid #eee;padding:6px 0;font-size:14px}
.kl-pop>div .mono{color:#999;font-size:10.5px}
.kl-pop .x{position:absolute;right:8px;top:6px}
.kl-pop .txtlink{margin-top:10px;font-size:11px;color:#b44;border-color:#b44}
.klmodal{width:min(460px,92vw)}
.klm-head{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.klm-head img{width:74px;height:74px;object-fit:contain;background:var(--paper);border-radius:50%;padding:6px}
.klm-head h3{font:700 22px/1.15 var(--serif);margin:2px 0 0}
.kl-list{list-style:none;padding:0;margin:18px 0 20px;border-top:1px solid #e3e0da}
.kl-list li{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #e3e0da}
.kl-list img{width:48px;height:48px;object-fit:contain}
.kl-list b{display:block;font:700 16px var(--serif)}.kl-list small{color:#777}
.kl-add{width:100%;justify-content:center;padding:17px;margin-bottom:12px}
.kl-stage.closed{animation:fadein .8s ease both}
.klbanner{display:flex;align-items:center;gap:16px;margin:4px 0 22px;padding:10px 18px 10px 10px;background:#fff;border:1px solid #e3e0da;text-decoration:none;color:var(--ink);transition:border-color .25s}
.klbanner:hover{border-color:var(--ink)}
.klbanner img{width:110px;height:72px;object-fit:cover}
.klbanner span{flex:1;font-size:15px}
.klbanner b{font-size:12px;border-bottom:1.5px solid var(--ink)}
@media (max-width:900px){.kl-grid,.kl-grid.pick{grid-template-columns:1fr}.kl-aside{position:relative;top:0;order:-1}.kl-pieces{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.klbanner{flex-wrap:wrap}.klbanner img{width:84px;height:56px}}
/* two-path bar above the footer */
.pathbar{border-top:1px solid #e3e0da;padding:30px 0}
.pathbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.pathbar .hand{font-size:24px;margin:0}
.pb-btns{display:flex;gap:12px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.kl-pops img,.kl-stk.drop,.kl-stage.closed{animation:none}}

.mine:before{display:none!important}
.mm-form{box-shadow:none;border-left:0;border-right:0;border-bottom:0;background:transparent}
.kl-pop{position:relative;left:auto;top:auto;transform:none;width:auto;margin:0 0 14px}
.kl-pop .x{right:8px;top:8px}
.kl-pops img{width:40%}
/* =====================================================================
   Kids Lab — full-bleed beige (sampled from box-open.webp: #f2e5d2)
   ===================================================================== */
body.kl-page{--klbg:#f2e5d2;--klline:rgba(60,42,20,.16);--klmute:#6b5a46;background:var(--klbg)}
body.kl-page .hdr{background:rgba(242,229,210,.9);border-bottom-color:var(--klline);backdrop-filter:blur(8px)}
body.kl-page .menu{background:var(--klbg)}
body.kl-page footer{background:var(--klbg);border-top-color:var(--klline)}
body.kl-page footer .mono,body.kl-page footer a{color:var(--klmute)}
body.kl-page .tiny,body.kl-page .kick2{color:var(--klmute)}
.kl{padding:0;overflow:hidden;min-height:calc(100vh - 62px);display:flex;align-items:center}
.kl>.wrap{width:100%}
.kl-grid{grid-template-columns:1.4fr 1fr;gap:clamp(10px,3vw,50px);padding-top:clamp(10px,2vw,30px);padding-bottom:clamp(30px,4vw,60px)}
.kl-stage{margin-left:calc(-1 * var(--pad) - 2vw)}
.kl-box{-webkit-mask-image:radial-gradient(ellipse 66% 64% at 50% 50%,#000 50%,transparent 100%);mask-image:radial-gradient(ellipse 66% 64% at 50% 50%,#000 50%,transparent 100%);width:118%;max-width:none;margin:-6% -9%}
.kl-stage.klive .kl-box{width:112%;margin:-4% -6%}
.kl-h{color:#1b1b1b}
.kl-note,.kl-count .hand{color:#24418a}
.kl .lede{color:#3b3127}
/* choices sit directly on the beige */
.kl-size{background:transparent;border:1px solid rgba(27,27,27,.28)}
.kl-size small{color:var(--klmute)}
.kl-size:hover,.kl-size.on{background:rgba(255,255,255,.28);border-color:#1b1b1b}
.kl-pc{background:transparent;border:1px solid var(--klline)}
.kl-pc:hover:not([disabled]){background:rgba(255,255,255,.3)}
.kl-pc small{color:var(--klmute)}
.kl-pop{background:rgba(255,251,244,.92);border-color:#1b1b1b;box-shadow:none}
.kl-pop>div:not(.mono){border-top-color:var(--klline)}
.kl-list,.kl-list li{border-color:var(--klline)}
.kl-list small{color:var(--klmute)}
.kl-close[disabled]{background:rgba(27,27,27,.18);border-color:transparent;color:#5c4f40}
.kl-grid.pick{grid-template-columns:1fr minmax(340px,480px);padding-top:clamp(24px,3vw,44px)}
.kl-pick .kl-stage{margin-left:0}
.kl-aside{top:76px}
body.kl-page .klmodal{background:#fbf5ec}
@media (max-width:900px){
  .kl{min-height:0;display:block}
  .kl-grid,.kl-grid.pick{grid-template-columns:1fr;gap:0;padding-top:0}
  .kl-stage{margin:0 calc(-1 * var(--pad))}
  .kl-box,.kl-stage.klive .kl-box{width:116%;margin:-2% -8% -6%}
  .kl-side{position:relative;z-index:2}
  .kl-h{font-size:clamp(38px,11vw,54px)}
  .kl-sizes{gap:8px}.kl-size{padding:14px 12px}.kl-size b{font-size:38px}
  .kl-pick .kl-aside{padding-top:8px}
}
/* hidden drawer casts no shadow onto the page edge */
.drawer:not(.open){box-shadow:none}
/* Kids Lab refinements: text always above the photo, softer photo edges */
.kl-side,.kl-main{position:relative;z-index:2}
.kl-stage{z-index:1}
.kl-box{-webkit-mask-image:radial-gradient(ellipse 60% 60% at 48% 52%,#000 42%,transparent 98%);mask-image:radial-gradient(ellipse 60% 60% at 48% 52%,#000 42%,transparent 98%)}
.kl-intro .kl-box,.kl-done .kl-box{width:112%;margin:-5% -6%}
@media (max-width:900px){.kl-aside{top:0!important}.kl-intro .kl-box,.kl-done .kl-box,.kl-box,.kl-stage.klive .kl-box{width:118%;margin:-4% -9% -8%}.kl-count{margin-top:0}}

/* ===== Round 3: box art (real image overlays), stickers, Kids Lab styles ===== */
div.kl-box,.bx{position:relative}
.bx{width:100%}
.bx-img{width:100%;display:block}
.kl-stage .bx{width:112%;margin:-5% -6%}
.kl-stage .bx-img{-webkit-mask-image:radial-gradient(ellipse 60% 60% at 48% 52%,#000 42%,transparent 98%);mask-image:radial-gradient(ellipse 60% 60% at 48% 52%,#000 42%,transparent 98%)}
.bx-tag{position:absolute;width:6%;left:60%;top:60%;transform-origin:50% 2%;filter:drop-shadow(0 3px 4px rgba(60,40,10,.18));animation:tagsway 5s ease-in-out infinite;pointer-events:none}
.bx-kl-closed .bx-tag{top:55%}
.bx-locker .bx-tag{width:9%;left:38%;top:60%}
.bx-logo{position:absolute;left:31.5%;top:64%;width:7%;height:14%;object-fit:contain;mix-blend-mode:multiply;opacity:.92}
.bx-kl-closed .bx-logo{left:26.5%;top:60%;width:7.5%;height:15%}
.bx-locker .bx-logo{left:73.5%;top:71%;width:16%;height:10%}
.bx-logo-ph{border:1.5px dashed rgba(27,27,27,.45);background:rgba(255,255,255,.35);font-size:9px;line-height:1.2;color:#555;mix-blend-mode:normal;display:grid;place-items:center;cursor:pointer;z-index:4}
.bx-logo-ed{position:absolute;left:2%;bottom:4%;z-index:5}
@keyframes tagsway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.stk2{position:absolute;width:var(--s);aspect-ratio:1;transform:translate(-50%,-50%) rotate(var(--r));z-index:2;transition:transform .25s}
.stk2-b{all:unset;box-sizing:border-box;display:block;width:100%;height:100%;cursor:pointer;filter:drop-shadow(0 0 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 6px 8px rgba(0,0,0,.22))}
.stk2-b img{width:100%;height:100%;object-fit:contain;display:block}
.stk2-x{position:absolute;right:-8%;top:-8%;width:22px;height:22px;border-radius:50%;border:0;background:#1b1b1b;color:#fff;font:700 13px/22px var(--sans);text-align:center;padding:0;cursor:pointer;opacity:.85;z-index:3}
.stk2-x:hover{opacity:1}
.stk2:hover,.stk2.on{transform:translate(-50%,-50%) rotate(0) scale(1.08);z-index:4}
.stk2.on .stk2-b{filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 0 3px #8db9f4) drop-shadow(0 6px 8px rgba(0,0,0,.22))}
.stk2.drop{animation:stkdrop .8s cubic-bezier(.3,1.4,.5,1) both}
@keyframes stkdrop{from{transform:translate(-50%,-260%) rotate(-28deg) scale(1.35);opacity:0}60%{opacity:1}}
.kl-styles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.kl-sty{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 12px 14px;background:transparent;border:1px solid rgba(27,27,27,.28);text-align:left;cursor:pointer;transition:background .3s,border-color .3s,transform .3s,color .3s;color:#1b1b1b}
.kl-sty-img{width:100%;aspect-ratio:16/10;overflow:hidden;margin-bottom:8px;background:rgba(255,255,255,.4)}
.kl-sty-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.kl-sty b{font:700 18px/1.15 var(--serif)}
.kl-sty small{font-size:12.5px;color:var(--klmute,#777);line-height:1.35}
.kl-sty-go{font-size:11px;margin-top:6px;border-bottom:1.5px solid currentColor}
.kl-sty:hover,.kl-sty.on,.kl-sty:focus-visible{background:var(--blue);border-color:var(--blue);color:#13284d;transform:translateY(-2px)}
.kl-sty:hover small,.kl-sty.on small{color:#1f3a6b}
.kl-sty:hover .kl-sty-img img{transform:scale(1.04)}
.kl-resume{margin-top:16px}
.kl-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 6px}
.kl-tab{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border:1px solid rgba(27,27,27,.28);background:transparent;cursor:pointer;transition:background .25s,border-color .25s;color:#1b1b1b}
.kl-tab:hover,.kl-tab.on{background:var(--blue);border-color:var(--blue);color:#13284d}
.kl-pc{cursor:default}
.kl-want{margin-top:10px;width:100%;justify-content:center;font-size:11.5px;padding:11px 10px;line-height:1.2;text-align:center}
.kl-beanie{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px dashed rgba(27,27,27,.35);margin:2px 0 14px;cursor:pointer}
.kl-beanie input{margin-top:3px;width:18px;height:18px;accent-color:#1b1b1b}
.kl-beanie b{display:block;font:700 15px var(--serif)}.kl-beanie small{color:#6b5a46}
.kl-pick .kl-stage .bx{width:108%;margin:-4% -4%}
@media (max-width:900px){.kl-stage .bx,.kl-pick .kl-stage .bx{width:118%;margin:-4% -9% -8%}.kl-styles{grid-template-columns:1fr 1fr;gap:8px}.kl-sty{padding:9px 9px 11px}.kl-sty b{font-size:16px}.kl-sty small{display:none}.stk2-x{width:20px;height:20px;line-height:20px}}
@media (prefers-reduced-motion:reduce){.bx-tag,.stk2.drop{animation:none}}

/* ---- garment on a real hanger (cut-out PNG + AI-generated hanger photo) ---- */
.oh{position:relative;display:block;width:100%}
.oh-h{position:absolute;left:21%;top:0;width:58%;z-index:1;pointer-events:none}
.oh-gw{display:block;position:relative;z-index:2;padding-top:20%}
.oh-g{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.14))}

/* ---- home hero rack ---- */
.hero-rack{position:relative;align-self:center;padding:10px 0 30px}
.hrack{position:relative;width:100%}
.hrack-rod{display:block;width:100%;height:auto;pointer-events:none}
.hrack-row{position:relative;display:flex;justify-content:space-around;align-items:flex-start;margin-top:-2.6%;padding:0 4%}
.hj{position:relative;flex:0 0 calc(92% / var(--n));display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;animation:sway 7s ease-in-out infinite;animation-delay:calc(var(--k) * -1.7s)}
.hj-a{display:block;width:100%;text-decoration:none}
.hj .ph{display:grid;place-items:center;aspect-ratio:3/4;width:100%;background:#eee;margin-top:20%}
.hj-tag{position:absolute;right:6%;top:44%;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink);z-index:3;transform:rotate(6deg);transform-origin:50% 0}
.hj-tag .str{display:block;width:1px;height:22px;background:#9a958d}
.hj-tag .tg{background:#fffdf8;border:1px solid #d8d2c6;padding:7px 9px 8px;font:600 10px/1.25 var(--mono);letter-spacing:.12em;text-transform:uppercase;max-width:110px;text-align:center;box-shadow:0 3px 8px rgba(0,0,0,.08)}
.hj.ott .tg{background:#fff6d6;border-color:#e6d6a0}
.hj-a:hover+.hj-tag .tg,.hj-tag:hover .tg{border-color:var(--ink)}
.hj-jordi{animation:none;align-self:stretch}
.hj-jordi img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;margin-top:8%}
.hj-ph{margin-top:14%;width:100%;aspect-ratio:3/5;border:1.5px dashed #b9b3a9;display:grid;place-items:center;text-align:center;padding:10px;color:#8d877d;font-size:10px;line-height:1.5;background:rgba(255,255,255,.4)}
.hj-link{display:block;font-size:10px;margin-top:6px}
.hj.is-hidden{opacity:.45}
.hrack-row .addcard{flex:0 0 14%;min-height:120px;align-self:center}
.rack-note{position:absolute;left:calc(var(--ox) - 150px);bottom:-46px;display:flex;align-items:flex-end;gap:2px;text-decoration:none;color:#24418a;z-index:4;max-width:290px}
.rack-note .hand{font-size:clamp(20px,1.9vw,25px);line-height:1.05;transform:rotate(-3deg);order:1}
.rack-note .rn-arrow{order:2;flex:0 0 auto;margin-bottom:22px;animation:rnbob 2.4s ease-in-out infinite;transform-origin:0 100%}
.rack-note:hover .hand{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@keyframes rnbob{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(4px,-6px) rotate(-4deg)}}
.home-page .hero{max-height:none}
@media (max-width:900px){.hero-rack{padding:0 var(--pad) 70px}.rack-note{left:4%;bottom:-6px}.hj-tag .tg{font-size:8.5px;max-width:84px;padding:5px 6px}.hj-tag{top:40%}}

/* ---- rolling mascots (scroll-linked) ---- */
main{position:relative}
.mascots{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:5}
.masc{position:absolute;left:0;top:0;width:clamp(56px,6vw,84px);height:auto;will-change:transform;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.masc-ed{padding:30px var(--pad)}
.masc-list{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.masc-it{position:relative;width:110px;padding-top:30px}.masc-it img{width:100%}

/* ---- playoffs page ---- */
.po{padding:clamp(40px,6vw,90px) 0}
.po-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,6vw,90px);align-items:start}
.po-l .title{margin:6px 0 14px}
.po-hang{position:relative;max-width:420px;margin-top:20px}
.po-hang .oh{width:62%;margin:-3.4% auto 0}
.po-tag{right:10%;top:40%}
.po-step{border-top:1px solid var(--line);padding:20px 0 6px;display:grid;grid-template-columns:44px 1fr;column-gap:12px}
.po-step .mono{grid-row:span 2;color:var(--mute);font-size:13px;padding-top:4px}
.po-step h3{font:700 22px/1.2 var(--serif);margin:0 0 6px}
.po-step p{margin:0 0 12px;color:var(--ink2)}
.po-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.po-note{color:#24418a;font-size:24px;transform:rotate(-2deg);margin-top:18px}
@media (max-width:900px){.po-grid{grid-template-columns:1fr}}

/* ---- product page: white, hanging on the rod, front/back, locker box ---- */
body.pv-page,body.pv-page main{background:#fff}
body.pv-page .hdr{background:rgba(255,255,255,.92)}
.pv-stage{position:relative;background:#fff}
.pv-rod{position:relative}
.pv-rodimg{display:block;width:100%;height:auto}
.pv-hang{width:64%;margin:-3.6% auto 0;transform-origin:50% 0;animation:sway 8s ease-in-out infinite;transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .45s}
.pv-hang .oh-gw{transition:transform .23s ease-in}
.pv-hang.turn .oh-gw{transform:scaleX(0)}
.pv-hang.lift{animation:none;transform:translateY(40px) scale(.55) rotate(-8deg);opacity:0;filter:drop-shadow(0 0 0 #fff) drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)}
.pv-hang .ph{display:grid;place-items:center;aspect-ratio:3/4;margin-top:20%;background:#f4f4f4}
.fb{display:flex;justify-content:center;gap:0;margin:16px auto 0;width:max-content;border:1px solid #1b1b1b}
.fb button{font:600 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;padding:9px 18px;border:0;background:#fff;cursor:pointer;color:#1b1b1b}
.fb button.on{background:#1b1b1b;color:#fff}
.pv-photo img{width:100%;display:block}
body.pv-page .pv-th{background:#fff}
.pv-stage.boxed{animation:fadein .4s ease both}
.pv-box{width:100%;max-width:560px;margin:0 auto}
.pv-added{text-align:center;margin-top:8px}
.pv-added-t{font:700 clamp(22px,2.4vw,30px) var(--serif);margin:0 0 14px}
.pv-added .ctas{justify-content:center;display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
body.pv-page .pv-main{box-shadow:none}

/* ---- shop by art: polaroid leaves its clip, lands by the title ---- */
.pol.leaving .card{transform:translate(-30px,-60px) rotate(-10deg)!important;opacity:0;transition:transform .45s cubic-bezier(.5,0,.7,.4),opacity .45s}
.pol.empty{pointer-events:none}
.pol.empty .card{visibility:hidden}
.line.mini{margin-top:14px}
.line.mini .pol{flex:0 0 clamp(92px,8.5vw,120px)}
.line.mini .pol .card{padding:6px 6px 8px}
.line.mini .pol h3{font-size:12px}
.line.mini .pol .num{display:none}
.coll-title{display:flex;gap:16px;align-items:flex-start;margin:6px 0 10px}
.coll-pol{position:relative;flex:0 0 112px;background:#fff;padding:7px 7px 18px;box-shadow:var(--shadow);transform:rotate(-3deg);margin-top:16px}
.coll-pol .clip{position:absolute;left:50%;top:-14px;width:12px;height:24px;margin-left:-6px;background:linear-gradient(90deg,#b4b0a9,#e7e4df 45%,#a19d96);border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.coll-pol img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.coll-side .coll-title h1{margin-top:4px}
.shopw{display:block;font:600 13px var(--mono);letter-spacing:.22em;text-transform:uppercase;font-style:normal;color:var(--mute);margin-bottom:4px}
@media (prefers-reduced-motion:reduce){.hj,.pv-hang,.rack-note .rn-arrow{animation:none}.pv-hang,.pv-hang .oh-gw,.pol.leaving .card{transition:none}}
.bx .kl-pops{left:34%;right:29%;top:26%;height:37%}
/* round 3 polish */
.rack-note{left:auto;right:calc(100% - var(--ox) - 14px)}
.kl-sty-img{aspect-ratio:2/1}
.kl-sty{padding:10px 10px 12px}
.kl-grid.pick{grid-template-columns:1fr minmax(380px,44%)}
@media (max-width:900px){
  .kl-grid.pick{grid-template-columns:1fr}
  .rack-note{position:relative;right:auto;left:auto;bottom:auto;margin-top:6px;padding-left:max(0px,calc(var(--ox) - 18px));align-items:flex-start;max-width:none}
  .rack-note .rn-arrow{order:0;margin:0 4px 0 0;width:46px;height:42px;transform:scaleX(-1) rotate(0deg);animation:none}
  .rack-note .hand{font-size:19px;max-width:200px;margin-top:20px}
  .hj-tag{top:50%;right:2%}.hj-tag .str{height:14px}.hj-tag .tg{font-size:7.5px;max-width:66px;padding:4px 5px;letter-spacing:.08em}
  .masc{width:52px}
}
.rack-note{bottom:-84px}
.rack-note .hand{max-width:250px;text-align:right}
@media (max-width:900px){
  .rack-note{bottom:auto;padding-left:max(0px,calc(var(--ox) - 40px))}
  .rack-note .rn-arrow{transform:none}
  .rack-note .hand{text-align:left}
}
.po h1.title{font:800 clamp(38px,4.6vw,60px)/1.02 var(--serif);letter-spacing:-.02em}

/* ===== Round 3b: small silver hooks (like the first version), no big hangers ===== */
.oh-h{display:none}
.oh-hook{position:absolute;left:50%;top:0;width:9%;max-width:30px;min-width:12px;transform:translateX(-50%);z-index:1;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.oh-gw{padding-top:min(7.6%,25px)}
/* home rack: hooks sit on the bar */
.hrack-row{margin-top:-3.1%}
.hj .ph{margin-top:8%}
/* small paper tags with handwritten text (first-version style) */
.hj-tag{right:auto;left:6%;top:auto;bottom:-3%;transform:rotate(-4deg)}
.hj:nth-child(even) .hj-tag{transform:rotate(3deg);bottom:-7%}
.hj-tag .str{display:none}
.hj-tag .tg{position:relative;background:#fffdf7;border:0;padding:6px 10px 7px 19px;font:400 15px/1.15 var(--hand);letter-spacing:0;text-transform:none;text-align:left;max-width:128px;box-shadow:0 3px 8px rgba(0,0,0,.14)}
.hj-tag .tg:before{content:"";position:absolute;left:6px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;border:1px solid #9b968e}
.hj.ott .tg{background:#fffdf7}
.hj-a:hover+.hj-tag .tg,.hj-tag:hover .tg{border:0;box-shadow:0 4px 12px rgba(0,0,0,.22)}
.rack-note{bottom:-104px}
@media (max-width:900px){.hj-tag .tg{font-size:11px;max-width:74px;padding:3px 6px 4px 13px}.hj-tag .tg:before{width:4px;height:4px;left:4px;margin-top:-2px}.hj-tag{bottom:-6%}.hj:nth-child(even) .hj-tag{bottom:-11%}.rack-note{margin-top:26px}}
/* product page: front + back side by side, each on its own hook */
.pv-hang,.fb{display:none}
.pv-pair{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:3%;margin:-3.4% auto 0;padding:0 6%;transform-origin:50% 0;transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .45s}
.pv-g{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;align-items:center;cursor:pointer;width:44%;transform-origin:50% 0;transition:transform .5s cubic-bezier(.3,1.2,.4,1),opacity .4s,filter .4s;animation:sway 8s ease-in-out infinite}
.pv-g:nth-child(2){animation-delay:-3s}
.pv-pair.one .pv-g{width:64%}
.pv-g:focus-visible{outline:2px solid #8db9f4;outline-offset:6px}
.pv-g .oh{width:100%}
.pv-lab{font-size:22px;color:#7d7870;margin-top:6px}
.pv-pair.has-fwd .pv-g:not(.fwd){opacity:.35;transform:scale(.82);filter:saturate(.7)}
.pv-pair.two .pv-g.fwd{transform:scale(1.22);z-index:3;animation:none}
.pv-pair.one .pv-g.fwd{transform:scale(1.14);animation:none}
.pv-pair.two .pv-g.fwd:first-child{transform:translateX(22%) scale(1.22)}
.pv-pair.two .pv-g.fwd:last-child{transform:translateX(-22%) scale(1.22)}
.pv-pair.lift{transform:translateY(40px) scale(.5) rotate(-8deg);opacity:0}
.pv-hint{text-align:center;color:#24418a;font-size:19px;min-height:24px;margin:26px 0 0}
.pv-photo{position:relative}.pv-photoback{display:block;margin:12px auto 0}
.pv-pair .ph{display:grid;place-items:center;width:64%;aspect-ratio:3/4;margin-top:10%;background:#f4f4f4}
@media (prefers-reduced-motion:reduce){.pv-g,.pv-pair{animation:none;transition:none}}
.pv-g.fwd .pv-lab{opacity:0}
.pv-pair.has-fwd+.pv-hint{margin-top:56px}
.pv-stage:has(.pv-pair.has-fwd) .pv-hint{margin-top:64px}

/* ===== Round 4: first-version wall rack restored on the home hero ===== */
.home-page .hero{padding:0;gap:0;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);max-height:none;min-height:0}
.home-page .hero-text{padding-top:40px;padding-bottom:40px}
.hero-rack{align-self:stretch;padding:0}
.wr{position:relative;container-type:inline-size;width:100%;height:100%;min-height:calc(100vh - 62px);overflow:hidden;background:radial-gradient(120% 70% at 50% 18%,#f0efec 0%,#e8e6e2 55%,#dfddd8 100%)}
.wr-floor{position:absolute;left:0;right:0;top:86cqw;bottom:0;background:linear-gradient(#d7d3cc,#d1cdc6);border-top:1px solid #cbc6be;z-index:0}
.wr-post{position:absolute;top:4cqw;width:max(1.5px,.22cqw);height:20cqw;background:#1c1c1c;z-index:1}
.wr-post.l{left:8.5%}.wr-post.r{left:90%}
.wr-rod{position:absolute;left:5.6%;right:7.2%;top:23.6cqw;height:max(5px,.85cqw);border-radius:99px;background:linear-gradient(#3b3b3b,#0d0d0d);box-shadow:0 .35cqw .6cqw rgba(0,0,0,.25);z-index:2}
.wr-j{position:absolute;left:var(--c);top:22.9cqw;transform:translateX(-50%);z-index:calc(3 + var(--k,0));text-decoration:none;color:var(--ink)}
.wr-sw{position:relative;display:block;transform-origin:50% 0;animation:sway 7s ease-in-out infinite;animation-delay:calc(var(--k,0) * -1.7s)}
/* hanger audit 1020: the garment's margin-top collapsed through .wr-sw, pushing the hook (absolute, top:0) down behind the jacket on phones.
   flow-root stops the collapse: the hook goes back up over the bar, the jackets stay exactly where they were. */
.wr-sw{display:flow-root}
.wr-hook{position:absolute;left:50%;top:0;height:3.6cqw;width:auto;transform:translateX(-50%);z-index:1;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.wr-g{position:relative;display:block;height:36.5cqw;width:auto;max-width:none;margin-top:2.7cqw;z-index:2;filter:drop-shadow(0 1.6cqw 1.8cqw rgba(0,0,0,.2));transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.wr-j:nth-of-type(2) .wr-g{height:35cqw}
.wr-j:nth-of-type(3) .wr-g{height:37.4cqw}
.wr-j:nth-of-type(4) .wr-g{height:40.3cqw}
.wr-j:hover{z-index:20}
.wr-j:hover .wr-g{transform:translateY(-.6cqw) scale(1.02)}
.wr-tag{position:absolute;left:9%;top:91%;z-index:3;background:#fffdf7;padding:.7cqw 1.4cqw .8cqw 2.4cqw;font:400 clamp(9px,1.55cqw,16px)/1.1 var(--hand);color:#222;max-width:12.5cqw;white-space:normal;box-shadow:0 .35cqw .9cqw rgba(0,0,0,.16);transform:rotate(-5deg)}
.wr-tag:before{content:"";position:absolute;left:.75cqw;top:50%;width:.7cqw;height:.7cqw;min-width:4px;min-height:4px;transform:translateY(-50%);border-radius:50%;border:1px solid #9b968e}
.wr-j:nth-of-type(even) .wr-tag{transform:rotate(4deg);top:95%}
.wr-j:nth-of-type(3) .wr-tag{left:14%;top:80%;transform:rotate(-4deg)}
.wr-j:nth-of-type(4) .wr-tag{left:9%;top:98%;transform:rotate(3deg)}
.wr-j:hover .wr-tag{box-shadow:0 .5cqw 1.4cqw rgba(0,0,0,.26)}
.wr-jordi{top:24cqw;z-index:7}.wr-jordi img{display:block;height:44cqw;width:auto}
.wr-note{position:absolute;z-index:4;font:400 clamp(14px,2.35cqw,24px)/1.15 var(--hand);color:#2a2926;max-width:19cqw}
.wr-note svg{display:block;overflow:visible;width:clamp(30px,5.5cqw,56px);height:auto;margin-top:.4cqw}
.wr-note.n1{left:13.5%;top:6.5cqw;transform:rotate(-4deg)}
.wr-note.n2{left:70%;top:6.5cqw;transform:rotate(3deg);text-align:center;max-width:17cqw}
.wr-note.n2 svg{margin:0 0 .3cqw 60%}
.wr-stk{position:absolute;left:4.5%;top:87.5cqw;display:flex;z-index:5}
.wr-stk img{width:clamp(48px,9.2cqw,96px);height:auto;filter:drop-shadow(0 .6cqw .9cqw rgba(0,0,0,.2))}
.wr-stk img:nth-child(1){transform:rotate(-6deg)}.wr-stk img:nth-child(2){transform:rotate(7deg) translate(-4%,5%)}
.wr-po{position:absolute;left:28%;top:90cqw;z-index:5;max-width:36cqw;color:#24418a;text-decoration:none;font:400 clamp(13px,2.1cqw,22px)/1.1 var(--hand);transform:rotate(-2deg)}
.wr-po .hand{font:inherit}
.wr-po:hover .hand{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.wr-chat{position:absolute;right:4%;top:87cqw;z-index:6;width:min(22cqw,230px);background:#fff;border-radius:12px 12px 12px 4px;padding:1.3cqw 1.6cqw 1.4cqw;box-shadow:0 .8cqw 2.2cqw rgba(0,0,0,.12);font:400 clamp(10px,1.45cqw,14px)/1.4 var(--sans);color:var(--ink);text-decoration:none;animation:floaty 5s ease-in-out infinite}
.wr-chat b{display:flex;align-items:center;gap:6px;font:700 clamp(7px,.95cqw,9.5px) var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:.4cqw}
.wr-chat b:before{content:"";width:7px;height:7px;border-radius:50%;background:#4cae6a;box-shadow:0 0 0 3px rgba(76,174,106,.18)}
.wr-chat:hover{transform:translateY(-2px)}
.wr-ed{padding:20px var(--pad)}
@media (max-width:900px){
  .home-page .hero{grid-template-columns:1fr}
  .wr{min-height:0;height:auto;aspect-ratio:1/1.06}
  .wr-floor{top:84cqw}
  .wr-stk{top:85.5cqw}.wr-po{top:93cqw;left:4.5%;max-width:none;font-size:15px}
  .wr-chat{top:85cqw;width:47cqw;font-size:11.5px;padding:8px 10px 9px}
  .wr-chat b{font-size:8px;margin-bottom:3px}
  .wr-tag{font-size:clamp(8.5px,2.4cqw,12px);max-width:17cqw;padding:2px 5px 3px 11px}
  .wr-note{font-size:clamp(13px,3.6cqw,18px);max-width:28cqw}
  .wr-note.n2{left:64%;max-width:28cqw}
}
@media (prefers-reduced-motion:reduce){.wr-sw,.wr-chat{animation:none}}
.wr-note.n2{left:67%}
@media (max-width:900px){
  .wr{aspect-ratio:1/1.13}
  .wr-floor{top:85cqw}
  .wr-stk{top:87cqw}.wr-stk img{width:17cqw}
  .wr-chat{top:87cqw}
  .wr-po{top:104.5cqw;left:5%}
  .wr-note.n2{left:63%}
}
/* ===== Round 4: boxes — no printed logo, navy + gold hang tag off the side, bigger stickers ===== */
.bx-tag{position:absolute;z-index:4;width:7%;left:74.5%;top:58.5%;transform-origin:50% 3%;transform:rotate(-7deg);filter:drop-shadow(1px 4px 4px rgba(30,25,15,.28));animation:tagsway2 5s ease-in-out infinite;pointer-events:none}
.bx-kl-closed .bx-tag{left:75.5%;top:53%}
.bx-locker .bx-tag{width:10.5%;left:90%;top:58%}
@keyframes tagsway2{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(-4deg)}}
.bx .kl-pops img{width:48%;left:calc(var(--i) * 20% - 14%)}
@media (prefers-reduced-motion:reduce){.bx-tag{animation:none}}
/* ===== Round 4: Baby Mascots parade (bottom of home) — round badges roll with the scroll ===== */
.mascots{display:none}
.parade{position:relative;padding:clamp(34px,5vw,64px) 0 clamp(30px,4vw,54px);background:#f3efe7;border-top:1px solid var(--line);overflow:hidden}
.pr-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.pr-note{font-size:clamp(19px,1.9vw,24px);color:#24418a;text-decoration:none}
.pr-note:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.pr-track{position:relative;height:calc(clamp(92px,11vw,150px) + 16px)}
.parade .masc{position:absolute;left:0;top:4px;width:clamp(92px,11vw,150px);aspect-ratio:1;display:block;will-change:transform;border-radius:50%;text-decoration:none}
.masc-in{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 50% 38%,#fffdf8 0%,#f7f0e1 70%,#efe5d0 100%);border:4px solid #fff;box-shadow:0 8px 18px rgba(40,30,10,.16),inset 0 0 0 1px rgba(0,0,0,.05);overflow:hidden;will-change:transform}
.masc-in img{display:block;width:84%;height:84%;margin:8%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.12))}
.parade .masc:hover .masc-in{box-shadow:0 10px 22px rgba(40,30,10,.24),0 0 0 3px #8db9f4}
.parade .masc:focus-visible{outline:2px solid #8db9f4;outline-offset:4px}
@media (max-width:900px){.pr-track{height:96px}.parade .masc{width:84px}.masc-in{border-width:3px}}
/* ===== Meet the mascots ===== */
.parade .masc{all:unset;box-sizing:border-box;position:absolute;left:0;top:4px;width:clamp(92px,11vw,150px);aspect-ratio:1;display:block;cursor:pointer;border-radius:50%;will-change:transform;transition:opacity .45s,filter .45s}
.parade .masc .masc-in{transition:box-shadow .3s}
.parade.meeting .masc{transition:transform .65s cubic-bezier(.3,1.1,.4,1),opacity .4s}
.parade.meeting .masc .masc-in{transition:transform .65s cubic-bezier(.3,1.1,.4,1),box-shadow .3s}
.parade .masc.away{opacity:0;pointer-events:none}
.parade .masc.away .masc-in{transform:scale(.35)!important}
.parade .masc.picked{z-index:3}
.parade .masc.picked .masc-in{box-shadow:0 12px 26px rgba(40,30,10,.22),0 0 0 4px #fff}
.meet-panel{display:none}
.parade.meeting .pr-track{height:auto;min-height:calc(clamp(92px,11vw,150px) + 16px)}
.parade.meeting .meet-panel{display:block;position:relative;margin:0 var(--pad) 0 calc(max(16px,(100% - 1240px) / 2) + clamp(92px,11vw,150px) + 64px);max-width:720px;background:#fffdf8;border-radius:6px;padding:26px 28px 28px;box-shadow:0 10px 30px rgba(40,30,10,.1);animation:meetIn .5s .2s cubic-bezier(.2,.8,.2,1) both}
@keyframes meetIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.meet-x{position:absolute;right:12px;top:10px;width:34px;height:34px;border:0;border-radius:50%;background:#1b1b1b;color:#fff;font:600 20px/34px var(--sans);text-align:center;padding:0;cursor:pointer}
.meet-name{font:800 clamp(28px,3vw,40px)/1.05 var(--serif);margin:4px 0 10px;padding-right:40px}
.meet-story{font-size:16px;line-height:1.7;color:#444;max-width:54ch;margin:0 0 16px}
.meet-sk-h{font-size:22px;color:#24418a;margin-bottom:8px}
.meet-sk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}
.meet-sk .meet-skf{aspect-ratio:4/5;border:1.5px solid #d9d2c4;background:#fbf8f1;display:grid;place-items:center;text-align:center;font:500 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#9b958a;border-radius:3px;overflow:hidden;position:relative}
.meet-sk .meet-skf img{width:100%;height:100%;object-fit:cover}
@media (max-width:699px){
  .parade.meeting .pr-track{padding-top:0}
  .parade.meeting .meet-panel{margin:calc(84px + 26px) 16px 0;padding:22px 18px 22px}
  .meet-sk{gap:8px}
}
@media (prefers-reduced-motion:reduce){.parade.meeting .masc,.parade.meeting .masc .masc-in,.parade.meeting .meet-panel{transition:none;animation:none}}
.meet-sk{max-width:520px}
.meet-sk .meet-skf{aspect-ratio:1}
@media (max-width:699px){
  .parade.meeting .pr-track{padding-top:calc(84px + 22px)}
  .parade.meeting .meet-panel{margin:0 16px}
}
/* ===== Sketch cards on Shop by Art galleries ===== */
.tile.sketchcard{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;cursor:pointer;background:#fffdf6;padding:12px 12px 14px;box-shadow:0 6px 16px rgba(40,30,10,.1);transform:rotate(-1.6deg);transition:transform .25s,box-shadow .25s;align-self:start}
.grid > .sketchcard:nth-of-type(even){transform:rotate(1.4deg)}
.tile.sketchcard:hover{transform:rotate(0) translateY(-3px);box-shadow:0 10px 24px rgba(40,30,10,.16)}
.tile.sketchcard:focus-visible{outline:2px solid #8db9f4;outline-offset:4px}
.sk-pin{position:absolute;left:50%;top:-7px;width:44px;height:16px;margin-left:-22px;background:rgba(230,214,160,.75);box-shadow:0 1px 2px rgba(0,0,0,.08);transform:rotate(-3deg)}
.sk-frame{display:grid;place-items:center;aspect-ratio:4/5;border:1.5px solid #d9d2c4;background:#fbf8f1;overflow:hidden}
.sk-frame img{width:100%;height:100%;object-fit:cover}
.sk-empty{font:500 10px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#9b958a;text-align:center}
.sk-lab{display:block;margin-top:10px;font-size:20px;color:#24418a}
body.skl-open{overflow:hidden}
.skl{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px}
.skl-scrim{position:absolute;inset:0;background:rgba(20,18,14,.55);animation:sklFade .25s both}
.skl-card{position:relative;width:min(980px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fffdf8;border-radius:6px;padding:30px 32px 26px;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:sklIn .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes sklFade{from{opacity:0}}@keyframes sklIn{from{opacity:0;transform:translateY(14px) scale(.98)}}
.skl-x{position:absolute;right:14px;top:14px}
.skl-cap{font-size:clamp(22px,2.4vw,30px);line-height:1.2;color:#24418a;margin:6px 46px 20px 0;max-width:34ch}
.skl-steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:12px}
.skl-step{margin:0}
.skl-fr{position:relative;display:grid;place-items:center;aspect-ratio:4/5;border:1.5px solid #d9d2c4;background:#fbf8f1;overflow:hidden}
.skl-fr img{width:100%;height:100%;object-fit:contain}
.skl-step figcaption{margin-top:8px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);text-align:center}
.skl-arr{font:400 30px var(--hand);color:#9b958a}
.skl-link{margin:18px 0 0;font-size:14px}.skl-link a{color:var(--ink);text-underline-offset:3px}
.skl-nav{display:flex;justify-content:space-between;margin-top:16px}
@media (max-width:700px){.skl{padding:0;align-items:end}.skl-card{border-radius:14px 14px 0 0;padding:24px 16px 20px;max-height:92vh}.skl-steps{grid-template-columns:1fr 1fr 1fr;gap:8px}.skl-arr{display:none}.skl-cap{font-size:21px}}
@media (prefers-reduced-motion:reduce){.skl-scrim,.skl-card{animation:none}}
/* ===== Rack corner: pile of 7 baby mascot marbles (replaces the 2 corner stickers) ===== */
.wr-pile{position:absolute;left:4.5%;top:86.2cqw;width:22cqw;height:14cqw;z-index:5}
.wr-mb{position:absolute;width:clamp(44px,9.2cqw,96px);aspect-ratio:1;border-radius:50%;display:block;text-decoration:none;transition:filter .2s}
.wr-mb-in{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 38%,#fffdf8 0%,#f7f0e1 70%,#efe5d0 100%);border:3px solid #fff;box-shadow:0 5px 10px rgba(40,30,10,.22),inset 0 0 0 1px rgba(0,0,0,.05);will-change:rotate}
.wr-mb-in img{display:block;width:84%;height:84%;margin:8%;object-fit:contain}
.wr-mb:hover{z-index:9;filter:brightness(1.04)}
.wr-mb:hover .wr-mb-in{box-shadow:0 7px 14px rgba(40,30,10,.28),0 0 0 3px #8db9f4}
.wr-mb:focus-visible{outline:2px solid #8db9f4;outline-offset:3px}
/* back row (4) then front row (3), overlapping */
.wr-mb:nth-child(1){left:0;top:0;z-index:1}
.wr-mb:nth-child(2){left:4.2cqw;top:-1.1cqw;z-index:1}
.wr-mb:nth-child(3){left:8.4cqw;top:.2cqw;z-index:1}
.wr-mb:nth-child(4){left:12.6cqw;top:-.7cqw;z-index:1}
.wr-mb:nth-child(5){left:2.1cqw;top:3.6cqw;z-index:2}
.wr-mb:nth-child(6){left:6.4cqw;top:4.1cqw;z-index:2}
.wr-mb:nth-child(7){left:10.6cqw;top:3.4cqw;z-index:2}
@media (max-width:900px){
  .wr-pile{top:87cqw;left:4%;width:46cqw;height:16cqw}
  .wr-mb{width:13cqw}.wr-mb-in{border-width:2px}
  .wr-mb:nth-child(n){top:0;z-index:1}
  .wr-mb:nth-child(1){left:0}.wr-mb:nth-child(2){left:5.4cqw;top:1.6cqw;z-index:2}.wr-mb:nth-child(3){left:10.8cqw}.wr-mb:nth-child(4){left:16.2cqw;top:1.6cqw;z-index:2}
  .wr-mb:nth-child(5){left:21.6cqw}.wr-mb:nth-child(6){left:27cqw;top:1.6cqw;z-index:2}.wr-mb:nth-child(7){left:32.4cqw}
}
@media (min-width:901px){
  .wr-pile{top:85.6cqw}
  .wr-mb:nth-child(2){left:3.9cqw}.wr-mb:nth-child(3){left:7.8cqw}.wr-mb:nth-child(4){left:11.7cqw}
  .wr-mb:nth-child(5){left:1.9cqw;top:3cqw}.wr-mb:nth-child(6){left:5.8cqw;top:3.5cqw}.wr-mb:nth-child(7){left:9.7cqw;top:2.9cqw}
}
@media (max-width:900px){
  .wr-mb:nth-child(2){left:5cqw}.wr-mb:nth-child(3){left:10cqw}.wr-mb:nth-child(4){left:15cqw}
  .wr-mb:nth-child(5){left:20cqw}.wr-mb:nth-child(6){left:25cqw}.wr-mb:nth-child(7){left:30cqw}
}
/* ===== Rack corner pile v3: looser, irregular scatter (marbles that just rolled to a stop) ===== */
.wr-pile{top:84.6cqw;width:32cqw;height:18cqw}
.wr-mb:nth-child(n){left:var(--x);top:var(--y);width:calc(9.2cqw * var(--s));z-index:var(--z,1)}
.wr-mb:nth-child(1){--x:0cqw;--y:1.4cqw;--s:1}
.wr-mb:nth-child(2){--x:7.4cqw;--y:-.7cqw;--s:.92;--z:2}
.wr-mb:nth-child(3){--x:14.8cqw;--y:1.9cqw;--s:1.05}
.wr-mb:nth-child(4){--x:23.3cqw;--y:.3cqw;--s:.94;--z:2}
.wr-mb:nth-child(5){--x:4cqw;--y:7.9cqw;--s:.97;--z:3}
.wr-mb:nth-child(6){--x:11.2cqw;--y:8.5cqw;--s:1.02;--z:2}
.wr-mb:nth-child(7){--x:21cqw;--y:8.9cqw;--s:.9;--z:3}
.wr-po{left:38.5%;max-width:33cqw}
@media (max-width:900px){
  .wr-pile{top:85.2cqw;left:4%;width:45cqw;height:19cqw}
  .wr-mb:nth-child(n){width:calc(11.6cqw * var(--s))}
  .wr-mb:nth-child(1){--x:0cqw;--y:.9cqw;--s:1}
  .wr-mb:nth-child(2){--x:10.2cqw;--y:-.4cqw;--s:.93}
  .wr-mb:nth-child(3){--x:20.6cqw;--y:1.3cqw;--s:1.04}
  .wr-mb:nth-child(4){--x:31.6cqw;--y:0cqw;--s:.95}
  .wr-mb:nth-child(5){--x:5.6cqw;--y:7.5cqw;--s:.96}
  .wr-mb:nth-child(6){--x:15.2cqw;--y:8.2cqw;--s:1.02}
  .wr-mb:nth-child(7){--x:26.6cqw;--y:7.6cqw;--s:.9}
  .wr-po{left:5%;max-width:none}
}
.wr-pile{top:83.9cqw}
.wr-mb:nth-child(5){--y:7cqw}.wr-mb:nth-child(6){--y:7.5cqw}.wr-mb:nth-child(7){--y:7.2cqw}
.wr-po{max-width:36.5cqw}
@media (max-width:900px){
  .wr-pile{top:84.3cqw}
  .wr-mb:nth-child(5){--y:6.3cqw}.wr-mb:nth-child(6){--y:6.9cqw}.wr-mb:nth-child(7){--y:6.4cqw}
  .wr-po{max-width:none}
}
/* ===== Meet the mascots v2: the footer bar becomes the mascot's strip (no pop-up) ===== */
.meet-panel{display:none!important}
.parade .pr-track{transition:height .5s cubic-bezier(.4,0,.2,1)}
.parade.meeting .pr-track{height:0!important;min-height:0!important;padding:0!important}
.parade.meeting{padding-bottom:10px}
.parade.meeting .masc{transition:opacity .35s,transform .35s}
.parade.meeting .masc.away{opacity:0}
.pb-meet{display:none}
.pathbar.meet{background:#fbf6ea}
.pathbar.meet .pb-normal{display:none}
.pathbar.meet .pb-meet{display:block;animation:msIn .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes msIn{from{opacity:0;transform:translateY(10px)}}
.ms-row{position:relative;display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.ms-badge{flex:0 0 auto;width:clamp(84px,8vw,112px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 38%,#fffdf8 0%,#f7f0e1 70%,#efe5d0 100%);border:4px solid #fff;box-shadow:0 6px 14px rgba(40,30,10,.18);animation:msPop .55s cubic-bezier(.3,1.5,.5,1) both}
@keyframes msPop{from{transform:scale(.4) rotate(-90deg);opacity:0}}
.ms-badge img{display:block;width:84%;height:84%;margin:8%;object-fit:contain}
.ms-hi{flex:0 0 auto;margin:0;font-size:clamp(24px,2.4vw,32px);line-height:1.1;max-width:12ch}
.ms-proc{flex:1 1 auto;min-width:0;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px;scrollbar-width:thin}
.ms-fr{position:relative;flex:0 0 clamp(92px,8.5vw,124px);aspect-ratio:1;margin:0;border:1.5px solid #d9d2c4;background:#fffdf8;display:grid;place-items:center;overflow:hidden;scroll-snap-align:start;border-radius:3px}
.ms-fr img,.ms-fr video{width:100%;height:100%;object-fit:cover;display:block}
.ms-shop{flex:0 0 auto}
.ms-x{position:absolute;right:calc(var(--pad) - 30px);top:-22px;width:30px;height:30px;border:0;border-radius:50%;background:#1b1b1b;color:#fff;font:600 18px/30px var(--sans);padding:0;cursor:pointer;text-align:center}
@media (max-width:760px){
  .ms-row{flex-wrap:wrap;gap:12px 14px}
  .ms-badge{width:76px}
  .ms-hi{font-size:26px;flex:1 1 auto}
  .ms-proc{flex:0 0 100%;order:3}
  .ms-fr{flex-basis:30%}
  .ms-shop{order:4;flex:0 0 100%;text-align:center}
  .ms-x{right:var(--pad);top:-12px}
}
@media (prefers-reduced-motion:reduce){.pathbar.meet .pb-meet,.ms-badge{animation:none}}
.ms-hi{text-align:left}
.parade.meeting .pr-note{visibility:hidden}
@media (max-width:760px){.ms-hi{flex:0 1 auto;margin-right:auto}}
/* ===== Process tiles (inline, non-shoppable) ===== */
.tile.proc{margin:0;background:#fff;display:flex;flex-direction:column}
.proc-m{position:relative;aspect-ratio:1;display:grid;place-items:center;background:#fbf8f1;border:1.5px solid #e2dccf;overflow:hidden}
.proc-m img,.proc-m video{width:100%;height:100%;object-fit:contain;display:block}
.proc-cap{display:block;padding:10px 12px 12px;font-size:20px;line-height:1.1;color:#24418a}
/* ===== Baby Mascots gallery (Jordi's layout) ===== */
.bmg{display:grid;grid-template-columns:minmax(200px,250px) 1fr;gap:clamp(24px,3.5vw,56px);padding-top:26px;padding-bottom:70px}
.bmg-side{position:sticky;top:84px;align-self:start}
.bmg-no{font:600 clamp(64px,7vw,96px)/.9 var(--mono);letter-spacing:-.06em;color:#8db9f4}
.bmg-k{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);margin:12px 0 6px}
.bmg-t{font:italic 700 clamp(32px,3vw,42px)/1.05 var(--serif);margin:0 0 16px}
.bmg-d{font-size:15px;line-height:1.65;color:#8f8a82;margin:0 0 22px}
.bmg-city{all:unset;cursor:pointer;font:700 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;border-bottom:1.5px solid var(--ink);padding-bottom:4px}
.bmg-sel{display:none;margin-top:14px}.bmg-sel.on{display:block}
.bmg-key{list-style:none;padding:0;margin:26px 0 0;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#6f6a62}
.bmg-key li{display:flex;align-items:center;gap:10px;margin:8px 0}
.bmg-key i{width:11px;height:11px;display:block}.k-m{background:#d8e6f4}.k-v{background:#f6eea4}
.bmg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.bmt{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;aspect-ratio:3/4.1;cursor:pointer;text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .25s,box-shadow .25s}
.bmt:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(30,25,15,.12)}
.bmt:focus-visible{outline:2px solid #8db9f4;outline-offset:3px}
.bmt-p{background:#f6f4f0}
.bmt-img{flex:1 1 auto;min-height:0;display:grid;place-items:center;background:#e9e6e1;overflow:hidden}
.bmt-img img{width:88%;height:88%;object-fit:contain}
.bmt-cap{display:block;padding:9px 10px 11px}
.bmt-cap b{display:block;font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase}
.bmt-cap small{display:block;font-size:12px;color:#5b5750;margin-top:2px}
.bmt-m{background:#d8e6f4;justify-content:center;padding:18px 16px}
.bmt-mi{width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid #fff;overflow:hidden;margin-bottom:12px;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.bmt-mi img{width:86%;height:86%;margin:7%;object-fit:contain;display:block}
.bmt-name{font:italic 700 clamp(17px,1.4vw,21px)/1.15 var(--serif)}
.bmt-m small{font-size:12.5px;line-height:1.5;color:#55606d;margin-top:8px}
.bmt-v{background:#f6eea4;cursor:default;justify-content:flex-end}
.bmt-v:hover{transform:none;box-shadow:none}
.bmt-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bmt-v.has .bmt-cap{position:relative;background:linear-gradient(transparent,rgba(246,238,164,.95) 40%)}
.bmt-play{position:absolute;left:50%;top:46%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(0,0,0,.18);color:#f6eea4;font-size:12px;line-height:34px;text-align:center;padding-left:2px;box-sizing:border-box}
.bmt-v .bmt-cap .hand{display:block;font-size:17px;line-height:1.05;margin-top:3px}
/* the profile card (About Baby … / how I drew him) as a centred panel */
.mcard .mcard-in{display:block!important;position:relative;width:min(760px,100%);max-height:calc(100vh - 40px);overflow:auto;margin:0;padding:26px 28px 28px;background:#fffdf8;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:sklIn .35s cubic-bezier(.2,.8,.2,1) both}
.mcard .skl-scrim{border:0;padding:0;cursor:pointer}
.mcard-badge{float:left;width:96px;height:96px;margin:0 20px 10px 0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 38%,#fffdf8 0%,#f7f0e1 70%,#efe5d0 100%);border:4px solid #fff;box-shadow:0 6px 14px rgba(40,30,10,.18)}
.mcard-badge img{width:84%;height:84%;margin:8%;object-fit:contain;display:block}
.mcard .meet-sk{clear:both}
@media (max-width:1100px){.bmg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.bmg{grid-template-columns:1fr;gap:18px}.bmg-side{position:static}.bmg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.bmg-no{font-size:56px}.mcard .mcard-in{border-radius:14px 14px 0 0;padding:22px 16px}.mcard-badge{width:72px;height:72px}}
.pathbar .ms-row{justify-content:flex-start}
/* ===== Collection titles always fit the left column (long single words shrink, multi-word names wrap) ===== */
.coll-side{container-type:inline-size;min-width:0}
.coll-title>div:not(.coll-pol){flex:1 1 auto;min-width:0}
.coll-side .coll-title h1{font-size:clamp(24px,calc((100cqi - 128px) / 5.9),52px);hyphens:none;-webkit-hyphens:none;overflow-wrap:normal;word-break:normal;text-wrap:balance}
.coll-side .coll-title:not(:has(.coll-pol)) h1{font-size:clamp(26px,calc(100cqi / 5.6),52px)}
/* ===== Footer meet strip: collapse the empty "Meet the mascots" band while a mascot is open ===== */
.parade{transition:padding .45s cubic-bezier(.4,0,.2,1),max-height .45s cubic-bezier(.4,0,.2,1);max-height:600px}
.parade.meeting{padding:0!important;max-height:0;border-top:0}
/* ===== Baby Mascots: trading-card mascot profiles (frame = team colours; art = Jordi's real mascot PNGs) ===== */
.bmt.bmc{background:transparent;padding:0;justify-content:stretch;container-type:inline-size;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;border-radius:9px}
.bmc-card{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:9px;padding:4.2cqw;background:linear-gradient(150deg,var(--c1) 0%,var(--c1) 58%,var(--c2) 58.2%,var(--c2) 100%);box-shadow:inset 0 0 0 1.2cqw rgba(255,255,255,.14)}
.bmc-top{display:flex;justify-content:space-between;align-items:center;gap:4px;padding:1.6cqw 2cqw 3cqw;color:#fff;font:700 4.6cqw/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.bmc-top b{font-weight:800}.bmc-top span{opacity:.85;overflow:hidden;text-overflow:ellipsis;letter-spacing:.08em}
.bmc-art{position:relative;flex:1 1 auto;min-height:0;display:grid;place-items:center;border-radius:5px;background:radial-gradient(circle at 50% 40%,#fff 0%,#f6f2ea 62%,#e9e3d6 100%);border:1.6cqw solid #fff;box-shadow:0 0 0 .7cqw var(--c2);overflow:hidden}
.bmc-art img{width:92%;height:92%;object-fit:contain;filter:drop-shadow(0 2.4cqw 2.4cqw rgba(30,20,5,.22));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.bmc-name{position:relative;z-index:1;margin:-5cqw 3cqw 0;padding:2.4cqw 3cqw 2.6cqw;background:#fff;border-radius:3px;text-align:center;box-shadow:0 1.2cqw 2.6cqw rgba(0,0,0,.2);border-bottom:1.4cqw solid var(--c2)}
.bmc-name i{display:block;font:italic 800 9.6cqw/1 var(--serif);color:var(--c1);letter-spacing:-.01em}
.bmc-name small{display:block;margin-top:1.2cqw;font:600 3.9cqw/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#8a847a}
.bmc-stat{display:block;padding:3.4cqw 2cqw 1cqw;color:#fff;text-align:center;font-size:4.9cqw;line-height:1.35}
.bmc-stat b{display:block;font:700 4.3cqw/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;margin-bottom:.8cqw}
.bmc-stat span{opacity:.88}
.bmc-shine{position:absolute;inset:0;border-radius:9px;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.38) 46%,rgba(255,255,255,.08) 54%,transparent 66%);background-size:250% 100%;background-position:120% 0;opacity:0;transition:opacity .3s,background-position .8s cubic-bezier(.2,.8,.2,1);mix-blend-mode:screen}
.bmt.bmc:hover{transform:perspective(900px) rotateY(-6deg) rotateX(3deg) translateY(-4px);box-shadow:0 16px 30px rgba(20,25,45,.25)}
.bmt.bmc:hover .bmc-shine{opacity:1;background-position:-20% 0}
.bmt.bmc:hover .bmc-art img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.bmt.bmc,.bmt.bmc:hover{transform:none}.bmc-shine{display:none}}
/* white always-moving shared mascot video tile (Cedar & Flip) */
.bmt-w{background:#fff;cursor:default;justify-content:flex-end;border:1px solid #ece8e1;box-sizing:border-box}
.bmt-w:hover{transform:none;box-shadow:none}
.bmt-w video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bmw-duo{position:absolute;inset:6% 4% 18%;display:flex;align-items:center;justify-content:center}
.bmw-duo img{width:58%;margin:0 -6%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(30,20,5,.16));animation:bmwBob 2.6s ease-in-out infinite;animation-delay:calc(var(--n) * -1.3s)}
@keyframes bmwBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7%) rotate(4deg)}}
.bmt-w .bmt-cap{position:relative;text-align:center}.bmt-w .hand{font-size:20px;color:#24418a}
/* process rows: video first, finished art last */
.fr-art{position:relative;background:radial-gradient(circle at 50% 40%,#fff,#f4efe4)!important;display:grid;place-items:center}
.ms-fr.fr-art img,.meet-skf.fr-art img{width:84%!important;height:84%!important;object-fit:contain!important}
.fr-art figcaption{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:#8a847a}
.fr-vid{background:#f6eea4!important;border-color:#e6da7a!important}
.meet-skf.fr-vid,.meet-skf.fr-art{margin:0;aspect-ratio:1;border:1.5px solid #d9d2c4;border-radius:3px;overflow:hidden;display:grid;place-items:center;font:500 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#9b958a}
.meet-skf.fr-vid video{width:100%;height:100%;object-fit:cover}
.k-m{background:linear-gradient(150deg,#00205b 58%,#00843d 58%)!important;border-radius:2px}.k-w{background:#fff;border:1px solid #d6d0c4;box-sizing:border-box}
.bmc-top{font-size:4.1cqw;letter-spacing:.1em}.bmc-top span{letter-spacing:.04em}
/* ===== Trading cards v2: site palette (muted blue / yellow / cream, rotating), dark text, square tile edges like the neighbours ===== */
.bmc[data-pal="0"]{--c1:var(--denim-soft);--c2:color-mix(in srgb,var(--denim) 55%,var(--denim-soft))}
.bmc[data-pal="1"]{--c1:color-mix(in srgb,var(--butter) 62%,var(--paper));--c2:color-mix(in srgb,var(--butter) 70%,var(--ink2) 30%)}
.bmc[data-pal="2"]{--c1:color-mix(in srgb,var(--butter) 18%,var(--paper2));--c2:color-mix(in srgb,var(--paper2) 55%,var(--ink2) 45%)}
.bmt.bmc,.bmc-card,.bmc-shine{border-radius:0}
.bmc-card{background:var(--c1);box-shadow:none}
.bmc-top,.bmc-stat{color:var(--ink)}
.bmc-top span{color:var(--ink2);opacity:1}
.bmc-stat span{color:var(--ink2);opacity:1}
.bmc-art{border-radius:2px;border-color:#fffdf8;box-shadow:0 0 0 .5cqw color-mix(in srgb,var(--c2) 60%,transparent);background:radial-gradient(circle at 50% 40%,#fffdf8 0%,#f7f4ee 65%,#efeae1 100%)}
.bmc-name{border-bottom-color:var(--c2);box-shadow:0 1cqw 2cqw rgba(0,0,0,.08);background:#fffdf8}
.bmc-name i{color:var(--ink)}
.bmt.bmc:hover{box-shadow:0 12px 24px rgba(30,25,15,.12)}
.k-m{background:var(--denim-soft)!important;border-radius:0}
/* ===== Shared wide (16:9) mascot video: spans two squares in the footer strip, two columns in the About panel ===== */
.ms-proc{align-items:center}
.ms-fr.fr-wide{flex-basis:calc(clamp(92px,8.5vw,124px) * 2 + 10px);aspect-ratio:16/9}
.fr-vid.has{background:#fff!important;border-color:#d9d2c4!important}
.fr-vid video{width:100%;height:100%;object-fit:cover;display:block}
.meet-sk .meet-skf.fr-wide{grid-column:span 2;aspect-ratio:16/9;align-self:center}
@media (max-width:760px){.ms-fr.fr-wide{flex-basis:calc(60% + 8px)}}
/* gallery: white always-moving tile — the horizontal clip sits slightly oversized in the middle, edges fade into white */
.bmw-vid{position:absolute;inset:0 0 16% 0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.bmt-w .bmw-vid video{position:static;inset:auto;width:128%;max-width:none;height:auto;aspect-ratio:16/9;object-fit:cover;flex:0 0 auto;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%);mask-composite:intersect}
.bmt-w .bmw-vid video{width:112%}
/* ===================== ALTERNATE HOME HERO: Jordi's studio photo, full-bleed (?hero=photo) ===================== */
.hero.hero-photo{--H:clamp(620px,calc(100svh - 62px),920px);--SW:max(100%,calc(var(--H) * 2.1478));display:block;position:relative;height:var(--H);max-height:none;min-height:0;padding:0;gap:0;overflow:hidden;background:#f1efec}
.hp-stage{position:absolute;left:0;bottom:0;width:var(--SW);aspect-ratio:2805/1306;--dx:28.6%;--dy:80%}
.hp-stage picture,.hp-img{position:absolute;inset:0;width:100%;height:100%;display:block}
.hp-img{object-fit:cover}
.hp-stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(241,239,236,.55) 0%,rgba(241,239,236,0) 22%)}
/* live headline on the empty wall left of / above Jordi */
.hp-text{position:absolute;z-index:6;left:calc(var(--SW) * .028);top:calc(var(--H) * .085);width:calc(var(--SW) * .215);padding:0;display:block}
.hp-text .kicker{margin-bottom:calc(var(--H) * .022);font-size:10.5px;letter-spacing:.2em}
.hp-text h1.big{font-size:clamp(40px,calc(var(--SW) * .0335),78px);line-height:.94;margin:0 0 calc(var(--H) * .034);text-shadow:0 1px 18px rgba(255,255,255,.55)}
.hp-text .ctas{gap:12px 22px}
.hp-text .btn.ghost{background:rgba(255,255,255,.0)}
/* "that's me" note + stroke arrow toward Jordi */
.hp-by{position:absolute;z-index:6;left:12.3%;top:51%;width:11%;color:#24418a;font-size:clamp(17px,calc(var(--SW) * .0118),26px);line-height:1;transform:rotate(-4deg);pointer-events:none}
.hp-by span{display:block;white-space:nowrap}
.hp-by svg{display:block;width:72%;margin:.2em 0 0 26%;overflow:visible;transform:rotate(-8deg)}
/* laptop hotspot */
.hp-dot{all:unset;position:absolute;z-index:7;left:var(--dx);top:var(--dy);width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.hp-dot span{width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.hp-dot:before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #fff;opacity:.9;animation:hpPulse 2.2s cubic-bezier(.2,.6,.3,1) infinite;box-shadow:0 0 6px rgba(0,0,0,.15)}
.hp-dot:hover span,.hp-dot:focus-visible span{transform:scale(1.55)}
.hp-dot:focus-visible{outline:2px solid #8db9f4;outline-offset:4px}
@keyframes hpPulse{0%{transform:scale(.6);opacity:.95}80%,100%{transform:scale(2.1);opacity:0}}
@media (prefers-reduced-motion:reduce){.hp-dot:before{animation:none;opacity:.6}}
/* rack on the empty right wall — no grey wall/floor, sized like it is in the room */
.hp-rack{position:absolute;z-index:5;left:calc(var(--SW) * .5);right:1.2%;top:0;bottom:0}
.hero-photo .wr{background:none;min-height:0;height:100%;overflow:visible}
.hero-photo .wr-floor{display:none}
.hero-photo .wr-post{top:0;height:24.6cqw;background:linear-gradient(90deg,#2a2a2a,#0e0e0e)}
.hero-photo .wr-rod{top:24cqw}
.hero-photo .wr-j{top:23.3cqw}
.hero-photo .wr-g{height:43.8cqw;filter:drop-shadow(0 2.4cqw 2.6cqw rgba(60,50,40,.22)) drop-shadow(0 .4cqw .5cqw rgba(0,0,0,.18))}
.hero-photo .wr-j:nth-of-type(2) .wr-g{height:42cqw}
.hero-photo .wr-j:nth-of-type(3) .wr-g{height:44.9cqw}
.hero-photo .wr-j:nth-of-type(4) .wr-g{height:48.4cqw}
.hero-photo .wr-note.n1{top:7.5cqw}.hero-photo .wr-note.n2{top:7.5cqw}
.hero-photo .wr-pile{top:auto;bottom:calc(var(--H) * .045)}
.hero-photo .wr-pile:after{content:"";position:absolute;left:-4%;right:-6%;bottom:-6%;height:24%;border-radius:50%;background:radial-gradient(closest-side,rgba(60,45,30,.22),transparent);z-index:-1}
.hero-photo .wr-po{top:auto;bottom:calc(var(--H) * .06)}
.hero-photo .wr-chat{top:auto;bottom:calc(var(--H) * .05);box-shadow:0 1.2cqw 3cqw rgba(60,45,30,.16)}
/* mobile: headline, then the photo of Jordi (with the hotspot), then the rack on a soft wall tone */
@media (max-width:1020px){
  .hero.hero-photo{height:auto;display:flex;flex-direction:column;background:#f2f0ed}
  .hp-stage{position:relative;order:2;width:100%;aspect-ratio:1500/1126;--dx:53.6%;--dy:76.3%}
  .hp-stage:after{background:linear-gradient(#f2f0ed 0%,rgba(242,240,237,0) 14%)}
  .hp-text{position:relative;order:1;left:auto;top:auto;width:auto;padding:30px var(--pad) 6px}
  .hp-text h1.big{font-size:clamp(44px,13vw,60px);margin-bottom:20px}
  .hp-by{left:auto;right:4%;top:4%;width:34%;font-size:19px;text-align:right}
  .hp-by svg{width:58%;margin:.15em 0 0 12%;transform:scaleX(-1) rotate(-30deg)}
  .hp-rack{position:relative;order:3;left:auto;right:auto;top:auto;bottom:auto;padding:0 0 4px;background:linear-gradient(#f2f0ed,#ebe8e3)}
  .hero-photo .wr{height:auto;aspect-ratio:1/1.13}
  .hero-photo .wr-g{height:36.5cqw}.hero-photo .wr-j:nth-of-type(2) .wr-g{height:35cqw}.hero-photo .wr-j:nth-of-type(3) .wr-g{height:37.4cqw}.hero-photo .wr-j:nth-of-type(4) .wr-g{height:40.3cqw}
  .hero-photo .wr-post{top:4cqw;height:20cqw}.hero-photo .wr-rod{top:23.6cqw}.hero-photo .wr-j{top:22.9cqw}
  .hero-photo .wr-pile{top:84.3cqw;bottom:auto}.hero-photo .wr-chat{top:87cqw;bottom:auto}.hero-photo .wr-po{top:104.5cqw;bottom:auto}
}
.rink-sec.hs-ping .rk-frame{animation:hsPing 1.2s ease-out 1}
@keyframes hsPing{0%{box-shadow:0 0 0 0 rgba(141,185,244,.7)}100%{box-shadow:0 0 0 26px rgba(141,185,244,0)}}
@media (min-width:1021px){
  .hp-rack{left:calc(var(--SW) * .488);right:.6%;top:calc(var(--H) * .075)}
  .hero-photo .wr-post.l{left:4.5%}.hero-photo .wr-post.r{left:95%}
  .hero-photo .wr-rod{left:2.5%;right:3%}
  .hero-photo .wr-j:nth-of-type(1){left:16.5%}.hero-photo .wr-j:nth-of-type(2){left:38.5%}.hero-photo .wr-j:nth-of-type(3){left:61%}.hero-photo .wr-j:nth-of-type(4){left:83%}
  .hero-photo .wr-g{height:52cqw}
  .hero-photo .wr-j:nth-of-type(2) .wr-g{height:50cqw}
  .hero-photo .wr-j:nth-of-type(3) .wr-g{height:53.5cqw}
  .hero-photo .wr-j:nth-of-type(4) .wr-g{height:57.5cqw}
  .hero-photo .wr-tag{font-size:clamp(11px,1.75cqw,17px);max-width:15cqw}
  .hero-photo .wr-po{max-width:30cqw;left:35%}
  .hero-photo .wr-note.n1{left:9%}.hero-photo .wr-note.n2{left:72%}
}
/* v2: rack sized by hero height (not width) so it reads as "in the room" on wide screens; note sits under the buttons */
@media (min-width:1021px){
  .hp-rack{--RW:min(calc(100% - var(--SW) * .5 - 1%),calc(var(--H) * .66));width:var(--RW);left:calc(var(--SW) * .5 + (100% - var(--SW) * .5 - var(--RW)) / 2);right:auto}
  .hero-photo .wr-j:nth-of-type(1){left:19.5%}.hero-photo .wr-j:nth-of-type(2){left:40.5%}.hero-photo .wr-j:nth-of-type(3){left:61.5%}.hero-photo .wr-j:nth-of-type(4){left:82%}
  .hero-photo .wr-g{height:48cqw}
  .hero-photo .wr-j:nth-of-type(2) .wr-g{height:46cqw}
  .hero-photo .wr-j:nth-of-type(3) .wr-g{height:49.2cqw}
  .hero-photo .wr-j:nth-of-type(4) .wr-g{height:53cqw}
  .hp-text{width:calc(var(--SW) * .225)}
}
.hp-text .hp-by{position:relative;left:auto;top:auto;width:auto;display:inline-flex;align-items:flex-start;gap:4px;margin:calc(var(--H) * .035) 0 0 calc(var(--SW) * .07);transform:rotate(-3deg)}
.hp-text .hp-by svg{width:clamp(60px,calc(var(--SW) * .045),110px);margin:.55em 0 0;transform:rotate(18deg)}
@media (max-width:1020px){.hp-text .hp-by{margin:16px 0 0 34%;font-size:19px}.hp-text .hp-by svg{width:62px;transform:rotate(62deg);margin-top:.7em}}
.hero.hero-photo{aspect-ratio:auto!important;margin:0!important;border-radius:0}
@media (max-width:1020px){
  .hero-photo .wr-note.n1,.hero-photo .wr-note.n2{top:6.5cqw}
  .hp-text{padding-bottom:0}
  .hp-text .hp-by{margin-top:10px;margin-bottom:-8px}
  .hp-stage:after{background:linear-gradient(#f2f0ed 0%,rgba(242,240,237,0) 9%)}
}
@media (min-width:761px) and (max-width:1020px){
  .hp-text{padding:56px var(--pad) 0}
  .hp-text h1.big{font-size:clamp(56px,8.5vw,84px)}
  .hp-text .hp-by{margin-left:46%}
  .hp-rack{padding:0 6%}
  .hero-photo .wr{aspect-ratio:1/1.02}
  .hero-photo .wr-po{top:93cqw}.hero-photo .wr-chat{top:85cqw;width:30cqw}.hero-photo .wr-pile{top:83cqw}
}
@media (min-width:761px) and (max-width:1020px){.hero-photo .wr{aspect-ratio:1/1.08}.hero-photo .wr-po{top:101cqw;left:5%}.hero-photo .wr-pile{top:80cqw}.hero-photo .wr-chat{top:82cqw}}
/* ===================== PHOTO HERO v2 (?hero=photo): split — left studio photo page, right = the exact current rack ===================== */
.hero.hph{overflow:hidden}
.hph-panel{position:relative;min-height:100%;overflow:hidden;background:linear-gradient(#d9cdc2 0%,#dccfc4 40%,#dbcec3 100%);container-type:inline-size}
.hph-photo{position:absolute;left:0;right:0;bottom:0;aspect-ratio:1500/1398}
.hph-photo img{display:block;width:100%;height:100%;object-fit:cover}
.hph-photo:before{content:"";position:absolute;left:0;right:0;top:-1px;height:22%;background:linear-gradient(#d9cdc2,rgba(217,205,194,0));z-index:1;pointer-events:none}
.hph-photo .hp-dot{left:53.5%;top:74.7%;z-index:3}
.hph-text{position:relative;z-index:4}
.home-page .hph-text{padding-top:clamp(34px,6vh,64px);padding-bottom:0}
.hph-text h1.big{margin-bottom:22px}
.hph .hp-by{position:absolute;z-index:4;left:auto;right:auto;top:auto;width:auto;font-size:clamp(17px,3.2cqw,25px);transform:rotate(-4deg)}
.hph .hp-by span{white-space:nowrap}
.hph .hp-by svg{width:clamp(44px,9cqw,80px);margin:2px 0 0 62%;transform:none}
@media (min-width:901px){.hph .hp-by{left:8%;bottom:calc(100cqw * 1398 / 1500 * .56)}}
@media (max-width:900px){
  .hph-panel{min-height:0;display:flex;flex-direction:column}
  .hph-photo{position:relative;order:2}
  .hph .hp-by{left:10%;bottom:calc(100cqw * 1398 / 1500 * .58)}
}
.hph-photo{aspect-ratio:1800/1398}
.hph-photo .hp-dot{left:44.6%;top:74.7%}
@media (min-width:901px){.hph .hp-by{left:7%;bottom:calc(100cqw * 1398 / 1800 * .5)}}
@media (max-width:900px){.hph .hp-by{left:6%;bottom:calc(100cqw * 1398 / 1800 * .52)}}
.hph-photo:before{height:40%}
.fr-piece{background:#fff!important}
.ms-fr.fr-piece img,.meet-skf.fr-piece img{width:94%!important;height:80%!important;margin-bottom:10%}
/* ===== hockey scene overlay (laptop hotspot on the photo hero) ===== */
.hs-ov{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.hs-ov.on{opacity:1}
.hs-ov iframe{width:100%;height:100%;border:0;display:block}
.hs-x{all:unset;position:absolute;top:14px;right:16px;z-index:2;width:40px;height:40px;border-radius:50%;background:#fff;color:#111;font:400 26px/40px var(--sans);text-align:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.hs-x:focus-visible{outline:2px solid #8db9f4;outline-offset:3px}
body.hs-open{overflow:hidden}
/* ===== ?can=soon: CAN sherpa preview, blurred, with a "Coming soon" tag in the private-preview (gate page) style ===== */
.wr-j.soon{cursor:default}
.wr-j.soon .wr-g{filter:blur(1.15cqw) saturate(1.05) drop-shadow(0 1.6cqw 1.8cqw rgba(0,0,0,.2));transform:scale(.985);user-select:none;-webkit-user-drag:none;pointer-events:none}
.wr-j.soon:hover .wr-g{transform:scale(.985)}
.wr-soon{display:flex;flex-direction:column;align-items:flex-start;gap:.2cqw;padding:.8cqw 1.5cqw .9cqw 2.5cqw;max-width:none;white-space:nowrap}
.wr-soon b{font:700 clamp(7px,1.05cqw,10.5px)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#8d8a84}
.wr-soon i{font:600 clamp(10px,1.7cqw,18px)/1 var(--hand);font-style:normal;color:#4f6f9f}
/* ?can=soon v2: handwritten "Coming soon!!!" note + arrow pointing at the blurred CAN (no paper tag on it) */
.wr-note.n-soon{left:56%;top:69.5cqw;transform:rotate(-5deg);color:#24418a;max-width:none;white-space:nowrap;z-index:8}
.wr-note.n-soon svg{margin:0 0 .2cqw 1.5cqw}
.wr.tags-off .wr-tag{display:none}
.wr-note.n-soon{left:53.5%;top:65.5cqw}

/* ===== ?hero=jordi — Jordi's own background, four jackets hung from her bar (all positions in image fractions) ===== */
.hero.jh{display:block!important;padding:0!important;min-height:0!important;max-height:none!important;height:auto!important;aspect-ratio:auto!important;margin:0!important;border-radius:0!important;gap:0;position:relative;background:#e8e5e0;overflow:hidden}
.jh-crop{--x0:0;--y0:0;--w0:1;--h0:1;--u:calc(100cqw / var(--w0));position:relative;width:100%;container-type:inline-size;overflow:hidden;aspect-ratio:calc(2805 * var(--w0)) / calc(1525 * var(--h0))}
.jh-bg{position:absolute;display:block;max-width:none;width:calc(100% / var(--w0));height:calc(100% / var(--h0));left:calc(var(--x0) / var(--w0) * -100%);top:calc(var(--y0) / var(--h0) * -100%);user-select:none;pointer-events:none}
.jh-rack{position:absolute;inset:0;pointer-events:none}
.jh-rack .jh-bg{display:none}
.jh-crop>.jh-j,.jh-crop>.jh-note,.jh-crop>.jh-cta,.jh-crop>.jh-dot,.jh-crop>.jh-pilebox{position:absolute;left:calc((var(--x) - var(--x0)) / var(--w0) * 100%);top:calc((var(--y) - var(--y0)) / var(--h0) * 100%);pointer-events:auto}
.jh-j{transform:translateX(-50%);z-index:3;display:block;text-decoration:none;color:inherit}
.jh-sw{position:relative;display:block;transform-origin:50% 0;animation:sway 7s ease-in-out infinite;animation-delay:calc(var(--k,0) * -1.7s)}
.jh-hook{position:absolute;left:50%;top:calc(var(--u) * -.006);height:calc(var(--u) * .03);width:auto;transform:translateX(-50%);z-index:1;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.jh-g{position:relative;display:block;height:calc(var(--u) * .142);width:auto;max-width:none;margin-top:calc(var(--u) * .02);z-index:2;filter:drop-shadow(0 calc(var(--u) * .008) calc(var(--u) * .01) rgba(0,0,0,.22));transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.jh-j:hover .jh-g{transform:translateY(calc(var(--u) * -.004)) scale(1.02)}
.jh-j.soon{cursor:default}.jh-j.soon .jh-g{filter:blur(calc(var(--u) * .005)) drop-shadow(0 calc(var(--u) * .008) calc(var(--u) * .01) rgba(0,0,0,.2))}
.jh-tag.wr-tag{left:8%;top:86%;padding:calc(var(--u) * .0035) calc(var(--u) * .007) calc(var(--u) * .004) calc(var(--u) * .012);font-size:clamp(9px,calc(var(--u) * .0098),15px);max-width:calc(var(--u) * .08);box-shadow:0 calc(var(--u) * .002) calc(var(--u) * .005) rgba(0,0,0,.16)}
.jh-note.wr-note{font-size:clamp(11px,calc(var(--u) * .0145),24px);max-width:calc(var(--u) * .12);z-index:4}
.jh-note svg{width:calc(var(--u) * .026);height:auto}
.jh-note.n2{text-align:left}
.jh-soon.wr-note{max-width:none;white-space:nowrap;color:#24418a;transform:rotate(-5deg)}
.jh-cta{transform:translate(-50%,-50%);z-index:5;white-space:nowrap}
.jh-crop>.jh-dot{z-index:6}
.jh-pilebox{width:calc(var(--u) * .56);aspect-ratio:3/1;container-type:inline-size;pointer-events:none!important;z-index:4}
.jh-pilebox .wr-pile{left:0;top:0;width:22cqw;height:14cqw}
.jh-pilebox .wr-mb{pointer-events:auto}
@media (max-width:760px){
  .jh-main{--x0:0;--w0:.47;--y0:.05;--h0:.95}
  .jh-rack{position:relative;inset:auto;--x0:.475;--w0:.52;--y0:.13;--h0:.82;background:#e8e5e0}
  .jh-rack .jh-bg{display:block}
  .jh-cta{font-size:13px;padding:10px 16px}
  .jh-pilebox .wr-mb:nth-child(n){width:calc(9.2cqw * var(--s))}
}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:760px){
  .jh-note.n1{display:none}
  .jh-crop>.jh-pilebox{--x:.60!important;--y:.765!important}
}
/* ?hero=jordi v2 — top cropped, bigger overlapping jackets hanging on the bar, two CTAs */
.jh-crop{--y0:.09;--h0:.91}
.jh-j{z-index:calc(3 + var(--k,0))}
.jh-j:hover{z-index:20}
.jh-hook{height:calc(var(--u) * .026);top:calc(var(--u) * -.0028)}
.jh-g{height:calc(var(--u) * .18);margin-top:calc(var(--u) * .0186)}
.jh-j:nth-of-type(even) .jh-tag{transform:rotate(4deg);top:92%}
.jh-j:nth-of-type(3) .jh-tag{left:14%;top:80%;transform:rotate(-4deg)}
.jh-j:nth-of-type(4) .jh-tag{left:9%;top:94%;transform:rotate(3deg)}
.jh-crop>.jh-cta{display:flex;flex-wrap:nowrap;gap:12px;margin:0;transform:translate(-50%,-50%)}
.jh-cta .btn{white-space:nowrap}
.jh-cta .btn.ghost{background:rgba(255,253,247,.6);color:var(--ink);border:1.5px solid var(--ink);padding:17.5px 26px;max-width:none;font:600 12.5px/1.25 var(--mono);letter-spacing:.16em;text-align:center}
.jh-cta .btn.ghost:hover{background:var(--ink);color:var(--paper)}
@media (max-width:760px){
  .jh-main{--y0:.05;--h0:.95}
  .jh-rack{--y0:.13;--h0:.82}
  .jh-crop>.jh-j{left:calc((var(--xm) - var(--x0)) / var(--w0) * 100%)}
  .jh-hook{height:calc(var(--u) * .03);top:calc(var(--u) * -.006)}
  .jh-g{height:calc(var(--u) * .142);margin-top:calc(var(--u) * .02)}
  .jh-j:nth-of-type(n) .jh-tag{left:8%;top:86%;transform:rotate(-5deg)}
  .jh-crop>.jh-cta{gap:8px}
  .jh-cta .btn,.jh-cta .btn.ghost{font-size:10px;letter-spacing:.1em;padding:11px 11px}
  .jh-crop>.jh-pilebox{--y:.80!important}
}
/* hang fix: no margin collapse — the collar sits right under the hook */
.jh-sw{padding-top:calc(var(--u) * .0186)}
.jh-g,.jh-j .jh-g{margin-top:0!important}
@media (max-width:760px){
  .jh-sw{padding-top:calc(var(--u) * .02)}
  /* ?mobile=rackfirst — rack hangs straight off the header, then the buttons, then Jordi's panel with the sketchbook edge */
  .hero.jh.jh-rf{display:flex!important;flex-direction:column}
  .jh-rf .jh-rack{order:-1;--y0:.263;--h0:.63}
  .jh-rf .jh-note{display:none}
  .jh-rf .jh-crop>.jh-cta{--y:.75!important}
  .jh-rf .jh-crop>.jh-pilebox{--y:.80!important}
}
@media (max-width:760px){.jh-rf .jh-rack{--h0:.69}}
/* ?can=soon&end=vancouver (final): one note "something / fun, coming / soon!!!" above the bar, arrow curving down to the blurred CAN */
.wr-note.n-fun{left:39%;top:3.2cqw;transform:rotate(-4deg);text-align:center;max-width:15cqw;z-index:8}
.wr-note.n-fun span{display:block}
.wr-note.n-fun svg{margin:-.6cqw 0 0 78%}
.wr-note.n-fun{left:38.5%;top:3cqw;font-size:clamp(15px,3.3cqw,30px);line-height:1.12;max-width:6.4em;color:#2a2926}
.wr-note.n-fun svg{width:clamp(30px,7.5cqw,66px);margin:-1.2cqw 0 0 86%}
.wr-note.n-fun{max-width:5.3em}
.wr-note.n-fun{max-width:none;white-space:nowrap}
/* ?hero=jordi mobile (default order, her first): rack panel is a close-up of the desktop rack — same overlap/sizes, row bleeds off both edges */
@media (max-width:760px){
  .jh:not(.jh-rf) .jh-rack{--x0:.574;--w0:.333;--y0:.10;--h0:.85}
  .jh:not(.jh-rf) .jh-crop>.jh-j{left:calc((var(--x) - var(--x0)) / var(--w0) * 100%)}
  .jh:not(.jh-rf) .jh-hook{height:calc(var(--u) * .026);top:calc(var(--u) * -.0028)}
  .jh:not(.jh-rf) .jh-g{height:calc(var(--u) * .18)}
  .jh:not(.jh-rf) .jh-sw{padding-top:calc(var(--u) * .0186)}
  .jh:not(.jh-rf) .jh-j:nth-of-type(n) .jh-tag{left:9%;top:91%;transform:rotate(-5deg)}
  .jh:not(.jh-rf) .jh-j:nth-of-type(even) .jh-tag{transform:rotate(4deg);top:92%}
  .jh:not(.jh-rf) .jh-j:nth-of-type(3) .jh-tag{left:14%;top:80%;transform:rotate(-4deg)}
  .jh:not(.jh-rf) .jh-j:nth-of-type(4) .jh-tag{left:9%;top:94%;transform:rotate(3deg)}
  .jh:not(.jh-rf) .jh-crop>.jh-pilebox{--x:.60!important;--y:.81!important}
}
@media (max-width:760px){
  .jh:not(.jh-rf) .jh-j:nth-of-type(1) .jh-tag{display:none}   /* racing crest's tag would sit off-screen on the left edge */
  .jh:not(.jh-rf) .jh-crop>.jh-pilebox{--y:.795!important}
}
/* hero CTA pair: solid + outline (default split hero, photo hero) */
.hero-ctas2{gap:12px!important}
.hero-ctas2 .btn{white-space:nowrap}
.hero-ctas2 .btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);padding:17.5px 26px;max-width:none;font:600 12.5px/1.25 var(--mono);letter-spacing:.16em;text-align:center}
.hero-ctas2 .btn.ghost:hover{background:var(--ink);color:var(--paper)}
@media (max-width:760px){.hero-ctas2 .btn,.hero-ctas2 .btn.ghost{font-size:10.5px;letter-spacing:.1em;padding:14px 14px}}
/* few marbles (?mascots=2|3 / seed heroMascots, jordiHeroMascots): a loose scatter, not a pile */
.wr-pile.few .wr-mb:nth-child(1){--x:0cqw;--y:2.2cqw;--s:1.04;--z:1}
.wr-pile.few .wr-mb:nth-child(2){--x:11.4cqw;--y:-.4cqw;--s:.94;--z:2}
.wr-pile.few .wr-mb:nth-child(3){--x:21.6cqw;--y:3.4cqw;--s:.98;--z:1}
@media (max-width:760px){
  .wr-pile.few .wr-mb:nth-child(1){--x:0cqw;--y:1.8cqw}
  .wr-pile.few .wr-mb:nth-child(2){--x:14.2cqw;--y:-.4cqw}
  .wr-pile.few .wr-mb:nth-child(3){--x:27.4cqw;--y:2.8cqw}
}
.jh-pilebox .wr-pile.few{width:32cqw}
/* ?hero=jordi: the single "something fun, coming soon!!!" note, arrow down at the blurred CAN */
.jh-fun.wr-note{font-size:clamp(14px,calc(var(--u) * .02),30px);line-height:1.12;text-align:center;max-width:none;white-space:nowrap;color:#2a2926;transform:rotate(-4deg)}
.jh-fun span{display:block}
.jh-fun svg{width:calc(var(--u) * .045);margin:calc(var(--u) * -.006) 0 0 86%}
/* default home, mobile: the playoffs line wrapped in the left column so Jordi's chat bubble no longer covers it */
@media (max-width:760px){
  .wr{aspect-ratio:1/1.2}
  .wr-po{max-width:46cqw!important;left:5%}
}
/* Jordi's speech bubble (her reference): plain white note card, outline bubble icon + JORDI, quoted mono message. No online dot / live-chat look. */
.wr-chat{background:#fff;border-radius:22px 22px 22px 8px;padding:clamp(12px,1.7cqw,18px) clamp(14px,2cqw,22px) clamp(13px,1.8cqw,19px);box-shadow:0 10px 28px rgba(40,35,30,.13),0 2px 6px rgba(40,35,30,.06);font:400 clamp(11px,1.32cqw,13.5px)/1.62 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;color:#3a3a3a;width:min(25cqw,250px);animation:none!important;letter-spacing:0}
.wr-chat b{display:flex;align-items:center;gap:7px;font:400 clamp(9px,1.1cqw,11.5px)/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:#8f8f8f;margin-bottom:clamp(6px,.8cqw,9px)}
.wr-chat b:before{content:none!important;display:none}
.wr-chat b svg{width:clamp(13px,1.5cqw,16px);height:auto;flex:none;color:#8f8f8f}
.wr-chat-q span:before{content:'"'}.wr-chat-q span:after{content:'"'}
.wr-chat:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(40,35,30,.16),0 2px 6px rgba(40,35,30,.06)}
@media (max-width:760px){
  .wr-chat{width:46cqw;font-size:10.5px;line-height:1.55;padding:10px 12px 11px;border-radius:18px 18px 18px 7px}
  .wr-chat b{font-size:8.5px;margin-bottom:5px}
}
/* ===== email compose (iOS-Mail look, mono) ===== */
.modal.mail{--mono2:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;width:min(440px,94vw);padding:0;border-radius:18px;overflow:hidden;background:#fff;font:400 14px/1.5 var(--mono2);color:#2c2c2c;display:flex;flex-direction:column;max-height:92vh}
.modal.mail.still{animation:none}
.mail form{display:flex;flex-direction:column;margin:0}
.mail-h{display:grid;grid-template-columns:72px 1fr 72px;align-items:center;padding:14px 14px 12px;border-bottom:1px solid #e6e6e6;background:#fbfbfb}
.mail-cancel{all:unset;cursor:pointer;color:#2f7cf6;font:400 15px var(--mono2);justify-self:start}
.mail-t{text-align:center;line-height:1.25;min-width:0}
.mail-t b{display:inline-flex;align-items:center;gap:6px;font:600 14.5px var(--mono2);color:#111}
.mail-t b svg,.mail-est svg,.mail-custom svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mail-t span{display:block;font:400 11.5px var(--mono2);color:#8c8c8c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-send{all:unset;justify-self:end;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#d9d9d9;color:#fff;cursor:pointer;transition:background .2s,transform .2s}
.mail-send svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mail-send.ready{background:#2f7cf6}.mail-send.ready:hover{transform:scale(1.07)}
.mail-send.busy{opacity:.6;pointer-events:none}
.mail-send:focus-visible{outline:2px solid #8db9f4;outline-offset:3px}
.mail-row{display:flex;align-items:baseline;gap:8px;padding:12px 16px;border-bottom:1px solid #ececec;cursor:text;transition:background .2s}
.mail-row span{flex:none;color:#8c8c8c;font:400 13.5px var(--mono2)}
.mail-row input{all:unset;flex:1;min-width:0;font:400 14px var(--mono2);color:#111}
.mail-row input::placeholder{color:#c4c4c4}
.mail-body{display:block;padding:12px 16px 4px;cursor:text}
.mail-body textarea{all:unset;display:block;width:100%;min-height:170px;font:400 14px/1.6 var(--mono2);color:#222;white-space:pre-wrap;box-sizing:border-box}
.mail-body textarea::placeholder{color:#b8b8b8}
.mail .err{margin:0;padding:0 16px 8px;min-height:18px;font:400 12px var(--mono2);color:#c2463c}
.mail .bad{background:#fff1ef}.mail .bad span{color:#c2463c}
.mail .bad.mail-body textarea::placeholder{color:#d79a92}
.mail .shake{animation:mailShake .45s cubic-bezier(.36,.07,.19,.97)}
.mail-send.shake{background:#e0675b}
@keyframes mailShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
.mail-est{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 18px 14px 14px;border-top:1px solid #ececec;background:#fafaf8}
.mail-custom{display:inline-flex;align-items:center;gap:4px;color:#2f7cf6;text-decoration:none;font:400 14px var(--mono2);white-space:nowrap}
.mail-custom:hover{text-decoration:underline;text-underline-offset:3px}
/* thread after sending */
.mt-scroll{flex:1;overflow-y:auto;padding:16px 14px 10px;display:flex;flex-direction:column;gap:8px;min-height:240px;max-height:52vh;background:#fff}
.mt-sent{align-self:flex-end;max-width:88%;border:1px solid #e3e3e3;border-radius:14px 14px 4px 14px;padding:10px 13px 11px;background:#f7faff;font-size:13px}
.mt-row{color:#555;font-size:11.5px;line-height:1.5}.mt-row span{color:#9a9a9a;margin-right:6px}
.mt-sent p{margin:7px 0 0;padding-top:7px;border-top:1px solid #e8edf5;white-space:pre-wrap;color:#222}
.mt-meta{align-self:flex-end;font-size:10.5px;color:#9a9a9a;margin:-3px 4px 4px}
.mt-msg.them{align-self:flex-start;max-width:86%;background:#ececee;border-radius:16px 16px 16px 5px;padding:10px 13px;font-size:13px;line-height:1.55;color:#222;animation:mtIn .3s ease-out}
.mt-msg.them b{display:block;font:500 10px var(--mono2);letter-spacing:.18em;text-transform:uppercase;color:#8c8c8c;margin-bottom:3px}
.mt-msg.typing{display:flex;gap:4px;padding:13px 14px}
.mt-msg.typing i{width:7px;height:7px;border-radius:50%;background:#a5a5a8;animation:mtDot 1.1s infinite ease-in-out}
.mt-msg.typing i:nth-child(2){animation-delay:.15s}.mt-msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes mtDot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@keyframes mtIn{from{opacity:0;transform:translateY(6px)}}
.mt-img{align-self:flex-end;max-width:62%}.mt-img img{display:block;width:100%;border-radius:14px 14px 4px 14px;border:1px solid #e3e3e3}
.mt-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid #ececec;background:#fbfbfb}
.mt-plus{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1.5px solid #c9c9c9;color:#555;font:300 24px/1 var(--mono2);cursor:pointer;transition:.2s}
.mt-plus:hover{border-color:#2f7cf6;color:#2f7cf6}
.mt-hint{flex:1;font-size:11.5px;color:#9a9a9a}
.mt-chip{position:relative;flex:1;display:flex}.mt-chip img{width:56px;height:56px;object-fit:cover;border-radius:10px;border:1px solid #ddd}
.mt-chip button{all:unset;position:absolute;left:46px;top:-6px;width:20px;height:20px;border-radius:50%;background:#333;color:#fff;font:13px/20px var(--mono2);text-align:center;cursor:pointer}
.msg-att{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.msg-att img{width:88px;height:88px;object-fit:cover;border-radius:6px;border:1px solid #ddd}
/* calculator toy */
.calc-toy{display:inline-block;flex:none;line-height:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.calc-toy img{display:block;width:100%;height:auto;animation:calcBob 4.6s ease-in-out infinite;filter:drop-shadow(0 6px 8px rgba(60,45,20,.12))}
.calc-toy.in-mail{width:118px;margin:-4px 0 -6px}
.calc-toy.shimmy{animation:calcShimmy .6s cubic-bezier(.36,.07,.19,.97)}
@keyframes calcBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(-1deg)}}
@keyframes calcShimmy{0%,100%{transform:rotate(0)}15%{transform:rotate(-9deg) scale(1.04)}30%{transform:rotate(8deg) scale(1.04)}45%{transform:rotate(-6deg)}60%{transform:rotate(5deg)}75%{transform:rotate(-2deg)}}
.ob-est{display:flex;align-items:center;gap:12px}
.calc-toy.in-ob{width:58px;margin:-26px 0 -8px}
@media (prefers-reduced-motion:reduce){.calc-toy img,.calc-toy.shimmy,.mail .shake,.mt-msg.them,.mt-msg.typing i{animation:none!important}}
@media (max-width:760px){
  .modal.mail{left:0;top:auto;bottom:0;transform:none;width:100%;max-height:94vh;border-radius:16px 16px 0 0;animation:mailUp .3s ease-out}
  .modal.mail.still{animation:none}
  @keyframes mailUp{from{transform:translateY(40px);opacity:0}}
  .mail-body textarea{min-height:200px}
  .calc-toy.in-ob{width:44px;margin:-20px 0 -6px}
}
@media (min-width:1021px){.wr-chat{top:83.6cqw}}
@media (max-width:760px){.wr-po{max-width:44cqw!important}}
@media (min-width:1021px){.wr-chat{right:2.4%}.wr-po{left:37%}}
/* ===== floating message box (replaces the bottom sheet): anchored at the chat bubble's corner, pops from it ===== */
.scrim.scrim-mail{background:rgba(27,27,27,.12)}
.modal.mail,.modal.mail.thread{position:fixed;left:auto;top:auto;right:var(--mr,24px);bottom:var(--mb,24px);transform:none;width:min(390px,calc(100vw - 32px));max-height:min(85vh,700px);border-radius:22px;box-shadow:0 24px 60px rgba(30,25,20,.22),0 4px 14px rgba(30,25,20,.08);transform-origin:100% 100%;animation:mailPop .26s cubic-bezier(.2,.9,.3,1.2);overflow:hidden;display:flex;flex-direction:column}
.modal.mail.still{animation:none}
@keyframes mailPop{from{opacity:0;transform:scale(.82) translateY(10px)}to{opacity:1;transform:none}}
.mail form{flex:1 1 auto;min-height:0;overflow-y:auto}
.mail-h{position:sticky;top:0;z-index:2}
.mail-body textarea{min-height:150px}
.mt-scroll{flex:1 1 auto;min-height:120px;max-height:none}
.mail-est{justify-content:flex-end;padding:10px 18px 12px;flex:none}
@media (max-width:760px){
  .modal.mail,.modal.mail.thread{left:auto;right:var(--mr,14px);bottom:var(--mb,14px);width:min(370px,calc(100vw - 28px));max-height:85vh;border-radius:20px;animation:mailPop .26s cubic-bezier(.2,.9,.3,1.2)}
  .modal.mail.still{animation:none}
  .mail-body textarea{min-height:130px}
}
@media (prefers-reduced-motion:reduce){.modal.mail{animation:none!important}}
/* ===== homepage quote band with the calculator ===== */
.qband{background:#f3efe6;border-top:1px solid #e4ddcf;border-bottom:1px solid #e4ddcf;margin:clamp(30px,5vw,60px) 0}
.qband-in{display:flex;align-items:center;justify-content:center;gap:clamp(24px,6vw,90px);padding-top:clamp(18px,2.6vw,30px);padding-bottom:clamp(18px,2.6vw,30px)}
.qband-txt{max-width:30em}
.qband-txt .kick2{margin-bottom:6px}
.qband h2{font:italic 800 clamp(26px,3vw,40px)/1.08 var(--serif);margin:0 0 6px;color:var(--ink)}
.qband-hand{font:400 clamp(19px,2vw,25px)/1.15 var(--hand);color:#24418a;margin:0 0 10px;display:flex;align-items:flex-end;gap:8px}
.qband-arrow{width:48px;height:auto;color:#24418a;transform:translateY(-2px) rotate(-6deg);flex:none}
.calc-toy.in-band{width:clamp(112px,11vw,150px);margin:-8px 0 -14px}
@media (max-width:760px){
  .qband-in{gap:16px;justify-content:space-between}
  .qband h2{font-size:24px}
  .qband-hand{font-size:18px}.qband-arrow{width:34px}
  .calc-toy.in-band{width:100px;margin:-4px 0 -8px}
}
.qband{margin:0}

.calc-toy.in-dark{width:clamp(150px,15vw,210px)}
.calc-toy.in-dark img{filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}

/* ===== "Create a custom order in 4 steps": Jordi's real Base44 hockey scene, inline (Oct 18 2026) ===== */
.rink-sec{padding:clamp(40px,6vw,80px) 0;background:#e6e3de}
.rk-title{margin:0 0 18px;text-align:center;font:400 clamp(22px,6vw,30px)/1.1 var(--led);color:#1d1d1d;letter-spacing:.04em;text-transform:uppercase}
.rk-frame{position:relative;width:100%;max-width:1280px;margin:0 auto;aspect-ratio:1280/680;border-radius:clamp(10px,1.6vw,22px);overflow:hidden;background:#f2f2f0;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.rk-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.rk-steps{list-style:none;margin:22px auto 0;padding:0;display:none;gap:16px;max-width:520px}
.rk-go{display:flex;justify-content:center;margin-top:clamp(22px,3vw,34px)}
@media (min-width:761px){.rk-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}  /* the scene's scoreboard already says it on desktop */
@media (max-width:760px){.rk-steps{display:grid}.rk-frame{border-radius:10px}}
/* ===== default home hero by device: desktop = Jordi's sitting-photo hero, mobile = split rack ===== */
.hdev-m{display:none}
@media (max-width:760px){.hdev-d{display:none}.hdev-m{display:block}}

/* ===== mobile split hero: "by Jordi" + arrow curving down to her quote (matches the desktop photo: light-blue Caveat + underline, marker caps quote) ===== */
.hb-mob{display:none}
@media (max-width:760px){
  .hero-text .hb-desk{display:none}
  .hb-mob{display:block;margin:2px 0 28px}
  .hb-by{position:relative;display:inline-block;margin:0 0 4px 6px;padding:0 4px 4px;color:#6fa8ee;font:500 32px/1 var(--hand);border-bottom:1.5px solid #8db9f4}
  .hb-by .hb-arrow{position:absolute;left:100%;top:8px;width:40px;height:48px;margin-left:4px;color:#9a9893;overflow:visible}
  .hb-line{margin:22px 0 0 2px;max-width:17em;font:400 15px/1.3 'Permanent Marker','Caveat',cursive;letter-spacing:.03em;text-transform:uppercase;color:#1f1f1f}
}
/* ===== rack notes (Oct 18): quiet "something fun" in the top-right corner (no arrow) + "Playoff jacket questions? I got you!!" → Ottawa ===== */
.wr .wr-note.n-fun{left:auto;right:12%;top:3cqw;font-size:clamp(12px,2.2cqw,20px);line-height:1.1;text-align:right;color:#55524c;transform:rotate(3deg);white-space:nowrap;max-width:none}
.wr-note.n-po{z-index:9;display:block;text-decoration:none;color:#24418a;text-align:left;max-width:none;white-space:nowrap;transform:rotate(-3deg);transform-origin:left top;cursor:pointer}
.wr-note.n-po span{display:block}
.wr .wr-note.n-po{left:24%;top:3.4cqw}
.wr .wr-note.n-po svg{width:clamp(34px,8cqw,64px);margin:.4cqw 0 0 13cqw}
.jh-crop>.jh-fun.wr-note{font-size:clamp(11px,calc(var(--u) * .0125),20px);color:#55524c;transform:rotate(3deg);text-align:right}
.jh-crop>.jh-po.wr-note{font-size:clamp(12px,calc(var(--u) * .0145),24px);color:#24418a;max-width:none;white-space:nowrap;line-height:1.12;transform:rotate(-3deg)}
.jh-po.n-po svg{width:calc(var(--u) * .028);margin:calc(var(--u) * .002) 0 0 calc(var(--u) * .062)}
/* tap/hover affordance: the note wiggles, the Ottawa jacket lifts and its tag wiggles */
@keyframes poWiggle{0%,100%{rotate:0deg}30%{rotate:-2.5deg}65%{rotate:2deg}}
.n-po:hover,.n-po:focus-visible,.n-po:active{animation:poWiggle .5s ease-in-out}
.n-po:hover span,.n-po:focus-visible span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.n-po:focus-visible,.wr-j.ott:focus-visible,.jh-j.ott:focus-visible{outline:2px solid #8db9f4;outline-offset:4px;border-radius:6px}
.wr-j.ott:hover .wr-tag,.jh-j.ott:hover .wr-tag,.wr-j.ott:focus-visible .wr-tag,.jh-j.ott:focus-visible .wr-tag{animation:poWiggle .5s ease-in-out}
.jh-j.ott:focus-visible .jh-g,.wr-j.ott:focus-visible .wr-g{transform:translateY(-.6cqw) scale(1.02)}
@media (prefers-reduced-motion:reduce){.n-po:hover,.n-po:focus-visible,.n-po:active,.wr-j.ott .wr-tag,.jh-j.ott .wr-tag{animation:none!important}}
.wr .wr-note.n-po.n-po-alt{left:35%}
.wr .wr-note.n-po.n-po-alt svg{margin-left:9cqw;width:clamp(30px,5cqw,52px)}  /* alt = between the two classic rack notes (?can=off previews) */
.jh-crop>.jh-po.wr-note[style*='0.628'] svg{margin-left:calc(var(--u) * .04)}

/* ===================== Box cart (Oct 18 2026): docked boxes, open box panel, /checkout "Package it up", Kids styles ===================== */
.bxs{position:relative;overflow:hidden;border-radius:12px;background:#f3e9d6}
.bxs .bx{container-type:inline-size}
.bxs-box{position:relative}
.bxs-rug{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}            /* Kids: Jordi's playroom rug (C.kidsBoxScene.rug) */
.bxs.has-rug .bx-img{mix-blend-mode:normal}
.bxs-plush{position:absolute;right:3%;bottom:4%;width:22%;z-index:3;filter:drop-shadow(0 6px 8px rgba(0,0,0,.2))}
.bxs-ph{position:absolute;left:8px;top:8px;z-index:5;background:rgba(255,255,255,.85);padding:3px 6px;font-size:9px;border-radius:3px}
.bxs-stk{pointer-events:auto}
.bx-lid{position:absolute;left:43.5%;top:59.5%;transform:translate(-50%,-50%) rotate(-5.5deg) skewX(-6deg);font:600 italic clamp(8px,2.6cqw,30px)/1 var(--serif);letter-spacing:.01em;color:#4a4130;opacity:.82;white-space:nowrap;mix-blend-mode:multiply;pointer-events:none}
.stk2.drop{animation:stkpop .55s cubic-bezier(.3,1.6,.5,1) .55s both}
@keyframes stkpop{0%{transform:translate(-50%,-50%) rotate(var(--r)) scale(0);opacity:0}70%{transform:translate(-50%,-50%) rotate(var(--r)) scale(1.18);opacity:1}100%{transform:translate(-50%,-50%) rotate(var(--r)) scale(1)}}
.bx-fly{position:fixed;z-index:250;object-fit:contain;pointer-events:none;transition:transform .7s cubic-bezier(.5,0,.3,1),opacity .7s ease-in;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))}
/* dock */
@media (max-width:760px){
}
/* open box panel */
.bxp{position:fixed;z-index:82;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1040px,94vw);max-height:92vh;overflow:auto;background:var(--paper,#f7f4ee);border-radius:16px;padding:26px 26px 24px;box-shadow:0 30px 80px rgba(0,0,0,.3);animation:pop .3s ease-out}
.bxp>.x{position:absolute;right:14px;top:14px;z-index:5}
.bxp-tabs{display:flex;gap:6px;margin:0 0 14px}
.bxp-tabs button{border:1.5px solid var(--line);background:#fff;border-radius:30px;padding:7px 14px;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.bxp-tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.bxp-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:center}
.bxp-stage .bxs{aspect-ratio:1.3}
.bxp-stage .bxs-box{width:150%;margin:-14% -25% 0}
.bxp-h{font:700 clamp(24px,2.6vw,32px)/1.1 var(--serif);margin:6px 0 16px}
.bxp-items{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px;max-height:44vh;overflow:auto}
.bxp-items li{display:flex;align-items:center;gap:10px;background:#fff;border-radius:10px;padding:6px 8px}
.bxp-it{display:flex;align-items:center;gap:12px;flex:1;color:inherit;text-decoration:none}
.bxp-it img,.bxp-it .ph{width:56px;height:56px;object-fit:contain;border-radius:8px;background:#f3efe7;flex:0 0 56px}
.bxp-it b{display:block;font:600 14px/1.25 var(--sans)}.bxp-it small{display:block;font-size:12px;color:var(--mute,#6b675f)}
.bxp-it:hover b{text-decoration:underline}
.bxp-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (max-width:760px){.bxp{inset:auto 0 0;left:0;top:auto;transform:none;width:100%;max-height:92vh;border-radius:16px 16px 0 0;padding:18px 16px 22px;animation:none}
  .bxp-grid{grid-template-columns:1fr;gap:12px}.bxp-items{max-height:none}.bxp-ctas .btn{flex:1;justify-content:center}}
/* product page "added" prompt uses the real box */
.pv-box .bxs{aspect-ratio:1.3}.pv-box .bxs-box{width:150%;margin:-14% -25% 0}
.pv-added-t .mono{display:inline-block;margin-left:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.65}
/* note from Jordi */
@keyframes jnin{from{transform:translateY(16px) rotate(-1.5deg);opacity:0}}
/* Kids: Style 1–4 squares + slide-down galleries */
.kl-sqs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px}
.kl-sq{aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;background:transparent;border:1.5px solid rgba(27,27,27,.55);border-radius:4px;cursor:pointer;color:#1b1b1b;transition:background .25s,color .25s,transform .25s;padding:6px;text-align:center}
.kl-sq b{font:700 clamp(16px,1.6vw,21px)/1 var(--serif)}
.kl-sq small{font:500 10px/1.25 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.kl-sq:hover{transform:translateY(-2px);background:rgba(255,255,255,.5)}
.kl-sq.on{background:#1b1b1b;color:#fff}
.kl-sq:focus-visible{outline:2px solid #8db9f4;outline-offset:3px}
.kl-ex{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1);background:#f3efe7;border-top:1px solid var(--line);border-bottom:1px solid var(--line);scroll-margin-top:70px}
.kl-ex[hidden]{display:none}
.kl-ex.opening{grid-template-rows:0fr}
.kl-ex-in{min-height:0;overflow:hidden;padding-top:26px;padding-bottom:36px;transition:opacity .4s}
.kl-ex.opening .kl-ex-in{opacity:0}
.kl-ex-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-bottom:18px}
.kl-ex-h .mono{font-size:12px;letter-spacing:.16em;text-transform:uppercase}.kl-ex-h .hand{font-size:22px;color:#24418a}.kl-ex-h .txtlink{margin-left:auto}
.kl-ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.kl-ex-it{margin:0;background:#fffdf8;border-radius:10px;padding:10px 10px 14px;display:flex;flex-direction:column;gap:8px}
.kl-ex-img{display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#fff}
.kl-ex-img img{width:100%;height:100%;object-fit:contain;transition:transform .4s}.kl-ex-img:hover img{transform:scale(1.04)}
.kl-ex-it b{display:block;font:600 14px/1.25 var(--sans)}.kl-ex-it small{font-size:11.5px;color:var(--mute,#6b675f)}
.kl-ex-add{margin-top:auto;justify-content:center}
@media (max-width:760px){.kl-sqs{grid-template-columns:repeat(2,1fr)}.kl-ex-grid{grid-template-columns:1fr 1fr;gap:10px}}
/* Mini & Me sticker + popover */
@keyframes mmwob{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(2deg) scale(1.03)}}
.mm-pop{position:absolute;left:0;top:calc(100% + 10px);z-index:30;width:min(560px,90vw);max-height:70vh;overflow:auto;background:#fffdf8;border-radius:12px;padding:16px 18px 18px;box-shadow:0 20px 50px rgba(40,30,10,.25);animation:jnin .3s ease-out both}
.mm-pop>.x{position:absolute;right:10px;top:10px}
.mm-h{margin:0 30px 8px 0;font:600 26px/1.1 var(--hand);color:#24418a}
.mm-row{padding:10px 0;border-top:1px solid var(--line)}
.mm-st{font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.mm-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.mm-it{display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.mm-it img{width:100%;aspect-ratio:1;object-fit:contain;background:#f3efe7;border-radius:8px}
.mm-it .btn{padding:8px 10px;font-size:10px;justify-content:center}
.mm-none{margin:0 0 8px;font:500 20px/1.15 var(--hand)}
.mm-row .btn.ghost{padding:8px 12px;font-size:10.5px}
@media (max-width:760px){.mm-pop{position:relative;top:auto;margin-top:10px;width:auto;max-height:none}}
/* /checkout = "Package it up" */
.co{padding:clamp(26px,4vw,60px) 0 90px}
.co-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:start}
.co-h{font:800 clamp(40px,5.4vw,72px)/.98 var(--serif);margin:6px 0 12px}
.co-intro{max-width:560px}
.co-sh{font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;margin:28px 0 10px}
.row3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:0 12px}
.co-box{background:#fff;border-radius:12px;padding:12px 14px;margin-bottom:12px}
.co-bl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;display:inline-block;padding:2px 10px;border-radius:20px}
.co-box-kids .co-bl{background:#f6e89a}.co-box-main .co-bl{background:#cfe3f6}
.co-it{display:grid;grid-template-columns:60px 1fr auto;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.co-it:first-of-type{border-top:0}
.co-it img,.co-it .ph{width:60px;height:60px;object-fit:contain;border-radius:8px;background:#f3efe7;display:block}
.co-it b{display:block;font:600 14px/1.25 var(--sans)}.co-it small{display:block;font-size:12px;color:var(--mute,#6b675f)}.co-it em{display:block;font-size:12px}
.co-pr{font-size:11.5px;white-space:nowrap}
.co-est{margin:10px 0 18px}.co-est small{display:block;font-size:12px;color:var(--mute,#6b675f)}
.co-deposit{border:1.5px dashed rgba(27,27,27,.35);border-radius:10px;padding:12px 14px;margin:14px 0 16px;background:rgba(255,255,255,.4)}
.co-deposit .mono{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}.co-deposit p{margin:4px 0 0;font-size:13px}
.co-go{width:100%;justify-content:center;margin-top:6px}
.co-r{position:sticky;top:84px}
.co-media{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:#f3e9d6;container-type:inline-size}
.co-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.co-tag{position:absolute;right:7%;bottom:8%;width:min(64%,330px);background:#fffaf0;border-radius:6px 6px 6px 6px;padding:16px 18px 14px 34px;transform:rotate(4deg);box-shadow:0 10px 24px rgba(40,30,10,.22);font:400 13px/1.45 var(--mono);color:#2a2926}
.co-tag:before{content:"";position:absolute;left:12px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#f3e9d6;box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.co-tag p{margin:0 0 4px}
.co-tag b{font:600 24px/1 var(--hand);color:#24418a;margin-left:2px}
.co-plane{display:inline-block;transform:rotate(-12deg);font-size:15px}
.co-tag .co-made{margin:8px 0 0;font:600 20px/1 var(--hand);color:#c8382f}
@media (max-width:900px){.co-grid{grid-template-columns:1fr}.co-r{position:relative;top:auto;order:-1}.co-media{aspect-ratio:4/3}.row3{grid-template-columns:1fr 1fr}}
.bx-lid{left:37.5%;top:59.5%;font-size:clamp(7px,2.15cqw,26px)}
@media (max-width:760px){.kl-sqs{grid-template-columns:1fr 1fr;gap:8px}.kl-sq{aspect-ratio:2.1/1}.kl-sq b{font-size:18px}
  .co-tag{width:62%;right:5%;bottom:7%;padding:10px 12px 10px 26px;font-size:11px}.co-tag b{font-size:19px}.co-tag .co-made{font-size:16px;margin-top:4px}.co-tag:before{left:9px;width:8px;height:8px}}
.mm-row .btn.ghost{border:1.5px solid var(--ink);background:#fff}

/* ---- box banner (bottom carousel) ---- */
.bxbar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(247,244,238,.96);backdrop-filter:blur(6px);border-top:1px solid rgba(0,0,0,.08);padding-bottom:env(safe-area-inset-bottom)}
.bxbar-in{max-width:1200px;margin:0 auto;height:58px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 18px}
.bxbar-l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6b665c;white-space:nowrap}
.bxbar-car{position:relative;flex:1;height:58px;display:flex;justify-content:center;align-items:flex-end;touch-action:pan-y}
.bxb{position:absolute;bottom:4px;left:50%;width:74px;border:0;background:none;padding:0;cursor:pointer;transform:translateX(calc(-50% + var(--d) * 74px)) scale(calc(1 - min(1, max(var(--d), calc(var(--d) * -1))) * .3));transform-origin:50% 100%;opacity:calc(1 - min(1, max(var(--d), calc(var(--d) * -1))) * .5);filter:grayscale(calc(min(1, max(var(--d), calc(var(--d) * -1))) * .7));transition:transform .45s cubic-bezier(.3,1.3,.5,1),opacity .3s,filter .3s;z-index:2}
.bxb:not(.on){z-index:1}
.bxb .bx{width:100%}
.bxb-lab{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);font-size:9px;white-space:nowrap;background:#fffaf0;padding:1px 6px;border-radius:8px;opacity:0;transition:opacity .2s}
.bxb.on .bxb-lab,.bxb:hover .bxb-lab{opacity:1}
.bxb.empty .stk2{display:none}
.bxb.pop{transform:translateX(-50%) translateY(-120px) scale(2.6);z-index:5;filter:none;opacity:1;transition:transform .42s cubic-bezier(.25,1.4,.5,1)}
body.bx-popping .bxbar{overflow:visible}
.bxbar-go{white-space:nowrap}
body.has-bxbar{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
body.has-bxbar .chat-fab,body.has-bxbar .fab{bottom:calc(74px + env(safe-area-inset-bottom))!important}
@media (max-width:760px){.bxbar-l{display:none}.bxbar-in{padding:0 12px}.bxb{width:62px}.bxbar-go{font-size:12px;padding:8px 12px}}
@media (prefers-reduced-motion:reduce){.bxb,.bxb.pop{transition:none}}

/* ---- kids lab: names-only squares + gallery with the open Kids box on the left ---- */
.kl-sq b{font:600 17px/1.25 var(--sans,inherit);letter-spacing:0}
.kl-sq small{display:none}
.kl-ex-in{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:34px;align-items:start}
.kl-exbox{position:sticky;top:84px}
.kl-exbox-in{background:#fffaf0;border-radius:14px;padding:16px 16px 18px;box-shadow:0 10px 30px rgba(40,30,10,.1)}
.kl-exbox-stage .bx{width:100%}
.kl-exbox-note{position:relative;margin:6px 0 12px;padding-left:4px;min-height:40px}
.kl-exbox-note .hand{font-size:22px;line-height:1.1;display:inline-block;transform:rotate(-3deg)}
.kl-exbox-a{position:absolute;right:6px;top:-46px;width:52px;height:46px;transform:rotate(200deg) scaleX(-1)}
.kl-exbox-acts{display:flex;flex-direction:column;gap:8px}
.kl-exbox-acts .btn{width:100%;justify-content:center}
.kl-ex-it{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:6px}
.kl-ex-it .want{font-size:13px;color:#6b665c}
.kl-ex-it:hover .kl-ex-img img{transform:translateY(-3px)}
.kl-ex-img img{transition:transform .25s}
.kl-count-t{font:500 14px/1.4 var(--sans,inherit)}
@media (max-width:760px){
  .kl-ex-in{grid-template-columns:1fr;gap:16px}
  .kl-exbox{position:sticky;top:76px;z-index:4}
  .kl-exbox-in{display:grid;grid-template-columns:96px 1fr;gap:4px 12px;align-items:center;padding:10px 12px}
  .kl-exbox-stage{grid-row:span 2}
  .kl-exbox-note{margin:0;min-height:0}.kl-exbox-note .hand{font-size:17px}.kl-exbox-a{display:none}
  .kl-exbox-acts{flex-direction:row}.kl-exbox-acts .btn{font-size:12px;padding:7px 8px}
}

/* ---- Mini & Me starburst (box view + checkout) ---- */
.mm-anchor{position:relative;display:inline-block}
.bxp-stage .mm-anchor{position:absolute;right:-6px;top:-6px;z-index:3}
.mm-burst{width:118px;height:118px;border:0;cursor:pointer;background:#f6c544;color:#1d1c1a;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;font:600 12px/1.2 var(--sans,inherit);text-align:center;clip-path:polygon(50% 0,59% 13%,74% 5%,76% 21%,92% 18%,87% 34%,100% 41%,89% 53%,99% 67%,83% 71%,85% 87%,69% 84%,61% 99%,50% 88%,39% 99%,31% 84%,15% 87%,17% 71%,1% 67%,11% 53%,0 41%,13% 34%,8% 18%,24% 21%,26% 5%,41% 13%);animation:mmWob 3.2s ease-in-out infinite}
.mm-burst span+span{font-weight:400;font-size:11px}
@keyframes mmWob{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(5deg) scale(1.04)}}
@media (prefers-reduced-motion:reduce){.mm-burst{animation:none;transform:rotate(-4deg)}}
.mm-anchor .mm-pop{position:absolute;right:0;top:calc(100% + 8px);width:min(380px,86vw);z-index:9}
.mm-row{display:block;border-top:1px solid rgba(0,0,0,.08);padding:10px 0}
.mm-kid{display:flex;gap:10px;align-items:center;margin-bottom:6px}.mm-kid img{width:42px;height:42px;object-fit:contain}
.mm-kid small{display:block;color:#6b665c;font-size:12px}
.co-bh{display:flex;justify-content:space-between;align-items:center;gap:10px}
.co-bh .mm-burst{width:96px;height:96px;padding:14px;font-size:10.5px}.co-bh .mm-burst span+span{font-size:9.5px}

/* ---- checkout full bleed ---- */
.co.co-bleed{padding:0}
.co-bleed .co-grid{max-width:none;margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100vh - 64px)}
.co-bleed .co-l{padding:48px clamp(20px,5vw,72px) 60px;max-width:720px;justify-self:end;width:100%}
.co-bleed .co-r{position:sticky;top:64px;height:calc(100vh - 64px);border-radius:0}
.co-bleed .co-media{height:100%;border-radius:0}
@media (max-width:760px){.co-bleed .co-grid{grid-template-columns:1fr}.co-bleed .co-r{position:relative;top:0;height:62vw;order:-1}.co-bleed .co-l{padding:24px 18px 40px}}

/* ---- homepage feedback strip + anonymous note card ---- */
.fbstrip{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:0;background:#efe9dc;color:#2a2926;padding:11px 18px;font:500 14px/1.35 var(--sans,inherit);cursor:pointer;text-align:center}
.fbstrip i{font-style:normal;transition:transform .2s}.fbstrip:hover i{transform:translateX(3px)}
.fbstrip:hover{background:#e8e0cf}
.scrim-fb{z-index:90}
.fbnote{position:fixed;z-index:91;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-1deg);width:min(420px,90vw);background:#fffdf5;background-image:repeating-linear-gradient(transparent 0 27px,rgba(80,120,180,.12) 27px 28px);border-radius:4px;padding:30px 24px 20px;box-shadow:0 22px 50px rgba(30,20,0,.28)}
.fbnote::before{content:'';position:absolute;top:-10px;left:50%;width:90px;height:22px;transform:translateX(-50%) rotate(2deg);background:rgba(246,197,68,.65)}
.fbnote .x{position:absolute;right:8px;top:6px}
.fb-h{font:500 15px/1.5 var(--sans,inherit);margin:0 0 12px}
.fbnote textarea{width:100%;min-height:120px;border:1px solid rgba(0,0,0,.14);border-radius:6px;padding:10px;font:400 15px/1.45 var(--sans,inherit);background:rgba(255,255,255,.7);resize:vertical}
.fb-send{margin-top:10px}.fb-send:disabled{opacity:.45}
.fb-thanks{font:500 18px/1.4 var(--sans,inherit);margin:6px 0 14px}
.msg-flag{display:inline-block;font:600 11px/1 var(--mono);background:#f6c544;padding:4px 7px;border-radius:4px;vertical-align:middle}
@media (max-width:760px){.fbstrip{font-size:13px;padding:10px 14px}}
.bxp-stage{position:relative}
.mm-pop .mm-h{font:700 18px/1.2 var(--sans,inherit);color:#1d1c1a}
.mm-pop .mm-none,.mm-pop .mm-done{font:400 14px/1.45 var(--sans,inherit);color:#2a2926}
@media (max-width:760px){.co-bleed .co-r,.co-bleed .co-media{width:100%;justify-self:stretch}.bxp-stage .mm-anchor{right:4px;top:4px}.bxp-stage .mm-burst{width:92px;height:92px;padding:13px;font-size:10px}.bxp-stage .mm-anchor .mm-pop{right:-4px}}
@media (max-width:760px){.bxp-stage .mm-anchor{position:static}.bxp-stage .mm-burst{position:absolute;right:4px;top:4px;z-index:3}.bxp-stage .mm-anchor .mm-pop{left:0;right:0;top:44px;width:auto}
  .co-bh .mm-anchor{position:static}.co-box{position:relative}.co-bh .mm-anchor .mm-pop{left:0;right:0;width:auto}}

/* ===== round 3: box view, after-add note, Mini & Me look, inline make-it-mine, checkout media ===== */
/* feedback strip: under the hero on desktop, under the black quote strip on mobile */
.fbstrip.fb-m{display:none}
@media (max-width:760px){.fbstrip.fb-d{display:none}.fbstrip.fb-m{display:flex}}
/* one message bubble at a time: hide the hero chat bubble while the compose sheet is open */
body.msg-open .wr-chat{visibility:hidden}

/* banner box tapped → the box view (box card left, style headings + item tiles right) */
.bxp.bxv{width:min(1120px,95vw);padding:26px 26px 28px}
.bxv-grid{display:grid;grid-template-columns:minmax(250px,330px) 1fr;gap:30px;align-items:start;margin-top:8px}
.bxv-box{position:sticky;top:0}
.bxv-box-in{background:#fffaf0;border-radius:14px;padding:16px 16px 18px;box-shadow:0 10px 30px rgba(40,30,10,.1)}
.bxv-stage .bx{width:100%}
.bxv-note{margin:8px 0 12px;min-height:30px}.bxv-note .hand{font-size:23px;line-height:1.1;display:inline-block;transform:rotate(-3deg)}
.bxv-msg{font:500 15px/1.45 var(--sans);margin:10px 0 12px}
.bxv-acts{display:flex;flex-direction:column;gap:8px}.bxv-acts .btn{width:100%;justify-content:center}
.bxv-acts .btn.ghost{max-width:none;text-align:center;border:1px solid var(--ink);padding:12px}
.bxv-main{min-width:0}
.bxv-g+.bxv-g{margin-top:26px}
.bxv-g .kl-ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.bxv-it{position:relative}.bxv-rm{position:absolute;right:8px;top:8px;background:#fff}
@media (max-width:760px){.bxp.bxv{padding:18px 14px 22px}.bxv-grid{grid-template-columns:1fr;gap:16px}.bxv-box{position:static}
  .bxv-box-in{display:grid;grid-template-columns:120px 1fr;gap:4px 12px;align-items:center}.bxv-box-in>.kick2{grid-column:1/-1;margin:0}.bxv-stage{grid-row:span 2}
  .bxv-note{margin:0}.bxv-note .hand{font-size:18px}.bxv-acts{grid-column:1/-1;flex-direction:row}.bxv-acts .btn{font-size:11px;padding:10px 8px}
  .bxv-g .kl-ex-grid{grid-template-columns:1fr 1fr}}

/* after-add prompt: handwritten phrase + arrow pointing down at the box */
.pv-love{position:relative;text-align:center;margin:0 0 -6px;z-index:2}
.pv-love .hand{font-size:clamp(24px,2.4vw,32px);display:inline-block;transform:rotate(-3deg)}
.pv-love-a{display:block;margin:4px auto 6px}

/* Mini & Me: starburst beside the style squares → one pop-up */
.kl-sq-wrap.has-mm{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.kl-sq-wrap .mm-burst{width:132px;height:132px;font-size:13px}
@media (max-width:760px){.kl-sq-wrap.has-mm{grid-template-columns:1fr}.kl-sq-wrap .mm-burst{justify-self:end;width:112px;height:112px;margin-top:-6px;font-size:11.5px}}
.scrim-mm{z-index:88}
.mm-look{position:fixed;z-index:89;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1040px,94vw);height:min(640px,88vh);background:var(--paper);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.3);display:grid;grid-template-columns:minmax(260px,42%) 1fr;overflow:hidden;animation:pop .3s ease-out}
.mm-x{position:absolute;right:12px;top:12px;z-index:3}
.mm-look-box{background:#fffaf0;padding:26px 24px;display:flex;flex-direction:column;justify-content:center}
.mm-look-box .mm-h{font:700 26px/1.15 var(--serif);margin:0 0 12px}
.mm-look-box .bx{width:100%}
.mm-look-r{padding:26px 24px 20px;display:flex;flex-direction:column;min-height:0}
.mm-sh{font:700 18px/1.2 var(--sans);margin:4px 40px 12px 0}
.mm-scroll{overflow:auto;min-height:0;flex:1;padding-right:6px}
.mm-look .mm-row{border-top:1px solid var(--line);padding:14px 0}
.mm-match{font-size:12px;color:var(--ink);margin-bottom:8px}
.mm-look .mm-kid{display:flex;gap:10px;align-items:center;margin-bottom:8px;font:400 13px/1.3 var(--sans)}.mm-kid small{display:block;color:var(--mute)}
.mm-kimg img{width:40px;height:40px;object-fit:contain}
.mm-look .mm-list{display:grid;gap:10px}
.mm-look .mm-it{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center;background:#fff;border-radius:10px;padding:10px}
.mm-img img{width:92px;height:92px;object-fit:contain}
.mm-img.big img{transform:scale(1.12)}
.mm-it-t b{display:block;font:600 14px/1.3 var(--sans);margin-bottom:6px}
.mm-look .mm-none{font:400 13.5px/1.45 var(--sans);margin:0 0 8px;color:var(--ink2)}
.mm-btns{display:flex;flex-wrap:wrap;gap:8px}.mm-btns .btn.ghost{max-width:none;border:1px solid var(--ink);padding:10px 12px}
.mm-look .mm-done{font:500 13px var(--sans);margin:0}
.mm-intro{font:400 14px/1.5 var(--sans);color:var(--ink2)}
@media (max-width:760px){.mm-look{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:90vh;width:94vw}
  .mm-look-box{padding:16px 16px 10px;display:grid;grid-template-columns:1fr 130px;gap:0 10px;align-items:center}.mm-look-box>.kick2{grid-column:1}.mm-look-box .mm-h{font-size:21px;grid-column:1;margin:0}.mm-look-box .bx{grid-column:2;grid-row:1/3}
  .mm-look-r{padding:12px 14px 14px}.mm-look .mm-it{grid-template-columns:72px 1fr}.mm-img img{width:72px;height:72px}}

/* inline "Make it mine" on listings */
.hc-w{position:relative;display:flex;flex-direction:column;align-items:center;transition:opacity .45s,transform .45s}
.lm-btn{margin-top:8px;border:1px solid var(--ink);background:#fff;font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:9px 13px;cursor:pointer}
.lm-btn[aria-expanded="true"]{background:var(--ink);color:#fff}
.tile-w{transition:opacity .45s,transform .45s}
.tile-a{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.tile-w .lm-btn{margin:0 10px 12px;align-self:flex-start}
.bmt-pw{display:flex;flex-direction:column}.bmt-a{display:contents;color:inherit;text-decoration:none}
.bmt-pw .lm-btn{position:absolute;left:10px;bottom:10px;z-index:3}
.leaving{opacity:0!important;transform:translateY(-24px) scale(.86)!important;pointer-events:none}
.lm{grid-column:1/-1;background:#fffaf0;border-radius:14px;box-shadow:0 10px 30px rgba(40,30,10,.1);overflow:hidden;transition:opacity .4s}
.lm.anim{animation:lmDown .42s cubic-bezier(.2,.8,.2,1)}
@keyframes lmDown{from{max-height:0;opacity:0}to{max-height:1400px;opacity:1}}
.lm-in{padding:20px 22px 22px}
.lm-h{display:flex;align-items:center;gap:14px;margin-bottom:14px}.lm-h h3{font:700 22px/1.15 var(--serif);margin:0}.lm-h .mm-close{margin-left:auto}
.lm-img img{width:64px;height:64px;object-fit:contain}
.lm-form{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.lm-form>.field:first-child,.lm-form>label.field:last-of-type{grid-column:1/-1}
.lm-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
@media (max-width:760px){.lm-form{grid-template-columns:1fr}.lm-in{padding:16px 14px 18px}}
@media (prefers-reduced-motion:reduce){.lm.anim{animation:none}.hc-w,.tile-w{transition:none}}

/* checkout media: cream full bleed, box photo feathered into it, lid label, tag tied on, video slot in front */
.co-bleed .co-media{background:var(--paper);display:flex;align-items:center;justify-content:center;overflow:visible}
.co-bleed .co-r{background:var(--paper)}
.co-boxw{position:relative;width:100%;aspect-ratio:1536/1024;margin-top:-6%}
.co-box-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-mask-image:radial-gradient(ellipse 62% 64% at 51% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 62% 64% at 51% 50%,#000 58%,transparent 100%)}
.co-lid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(60,40,10,.18))}
.co-vslot{position:absolute;left:22%;top:80%;width:44%;aspect-ratio:16/9}
.co-vslot video{width:100%;height:100%;object-fit:contain}
.co-bleed .co-tag{left:auto;right:4%;top:47%;bottom:auto;width:min(330px,40%);transform:rotate(7deg);transform-origin:12% 50%;padding:16px 18px 14px 34px;font:400 14.5px/1.5 var(--mono);letter-spacing:.08em}
.co-bleed .co-tag:after{content:"";position:absolute;left:16px;top:50%;width:70px;height:1.5px;background:#b9a98a;transform:translate(-100%,-50%) rotate(-28deg);transform-origin:100% 50%}
.co-bleed .co-tag p{margin:0 0 7px}
.co-bleed .co-tag b{font-size:28px;letter-spacing:.02em}
.co-bleed .co-plane{font-size:22px;margin-right:4px;vertical-align:-2px}
.co-bleed .co-tag .co-made{font-size:22px;letter-spacing:.03em;margin-top:10px}
.co-heart{color:#1b1b1b;font-family:var(--sans);font-size:.9em}
@media (max-width:900px){.co-bleed .co-r{height:auto;padding:18px 0 34px}.co-boxw{margin-top:0}}
@media (max-width:760px){.co-bleed .co-tag{width:52%;right:2%;top:50%;padding:9px 10px 8px 22px;font-size:10px;letter-spacing:.06em}.co-bleed .co-tag b{font-size:18px}.co-bleed .co-plane{font-size:15px}.co-bleed .co-tag .co-made{font-size:15px;margin-top:5px}.co-bleed .co-tag:before{left:7px;width:7px;height:7px;margin-top:-3.5px}.co-bleed .co-tag:after{left:9px;width:34px}.co-bleed .co-tag p{margin-bottom:3px}}
/* checkout right panel: true full bleed. The panel holds a "stage" with the template's exact aspect (720x837 desktop / 390x520 mobile),
   scaled like object-fit:cover and anchored bottom-centre, so the HTML tag + video slot stay locked to the box in the image. */
.co-bleed .co-grid{gap:0!important;column-gap:0!important}
.co-bleed .co-r{position:sticky;top:63px;height:calc(100vh - 63px);width:100%;padding:0!important;overflow:hidden;background:#efe3cf}
.co-bleed .co-media{position:absolute;inset:0;width:100%!important;height:100%;aspect-ratio:auto;border-radius:0;display:block;background:transparent;overflow:hidden}
.co-stage{position:absolute;left:50%;bottom:0;transform:translateX(-50%);aspect-ratio:720/837;width:max(100%,calc((100vh - 63px) * 720 / 837));container-type:inline-size}
.co-stage-img{position:absolute;inset:0;width:100%;height:100%;display:block}
.co-stage .co-vslot{position:absolute}
.co-stage .co-tag{position:absolute;margin:0}
@media (max-width:900px){.co-bleed .co-r{position:relative;top:0;height:auto;aspect-ratio:390/520;order:-1}.co-stage{aspect-ratio:390/520;width:100%}}
/* stage overlays, positioned to match the template guides (checkout-template/coords.json) */
.co-stage .co-vslot{left:13.89%;top:63.32%;width:72.22%;height:32.86%;aspect-ratio:auto}
.co-bleed .co-stage .co-tag{left:59.72%;top:45.4%;right:auto;bottom:auto;width:37.5%;padding:2.2cqw 2.4cqw 2cqw 4.6cqw;font:400 2.05cqw/1.5 var(--mono);letter-spacing:.08em;transform:rotate(6deg)}
.co-bleed .co-stage .co-tag b{font-size:3.9cqw}
.co-bleed .co-stage .co-plane{font-size:3.1cqw}
.co-bleed .co-stage .co-tag .co-made{font-size:3.1cqw;margin-top:1.3cqw}
.co-bleed .co-stage .co-tag:before{left:1.6cqw;width:1.4cqw;height:1.4cqw;margin-top:-.7cqw}
.co-bleed .co-stage .co-tag:after{left:2.3cqw;width:9cqw}
@media (max-width:900px){
  .co-stage .co-vslot{left:6.41%;top:73.08%;width:87.18%;height:25.48%}
  .co-bleed .co-stage .co-tag{left:52.56%;top:25%;width:46.15%;padding:2.6cqw 2.6cqw 2.2cqw 6cqw;font-size:2.75cqw;letter-spacing:.06em;transform:rotate(5deg)}
  .co-bleed .co-stage .co-tag b{font-size:5cqw}.co-bleed .co-stage .co-plane{font-size:4cqw}.co-bleed .co-stage .co-tag .co-made{font-size:4.1cqw;margin-top:1.2cqw}
  .co-bleed .co-stage .co-tag:before{left:2.2cqw;width:2cqw;height:2cqw;margin-top:-1cqw}.co-bleed .co-stage .co-tag p{margin-bottom:.8cqw}.co-bleed .co-stage .co-tag:after{left:3.2cqw;width:10cqw}}
/* nav: The Studio in the brand display italic (no underline), Shop by category = yellow, Shop by art = light blue */
.nav a.u-studio{font:italic 600 18px/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink);border-bottom-color:transparent!important;padding-bottom:5px}
.nav a.u-shop{border-bottom-color:var(--yellow)!important}
.nav a.u-art{border-bottom-color:var(--blue)!important}
.basketbtn .cart-ico{width:17px;height:17px}
.menu a[href="/studio"]{font-style:italic;font-weight:600}
.menu a[href="/shop"]{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:4px;text-underline-offset:6px}
.menu a[href="/collections"]{text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:4px;text-underline-offset:6px}
.menu .mlocker{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);font:italic 800 34px/1.25 var(--serif);padding:6px 0;color:var(--ink);cursor:pointer}
.menu .mlocker small{font:400 10px var(--mono);letter-spacing:.2em;color:var(--mute);margin-right:12px;vertical-align:middle}
.nav a.u-shop,.nav a.u-art{border-bottom-width:2px!important}
.filelink{display:inline-flex;align-items:center;gap:7px}
.filelink .fold-ico{width:16px;height:16px;flex:none}

/* ================= My client file (portal) — clean, quiet cards in the Base44 layout ================= */
.pf{padding:clamp(28px,4vw,52px) var(--pad) 90px;background:var(--paper)}
.pf-wrap{max-width:1240px;margin:0 auto}
.pi{width:16px;height:16px;flex:none;vertical-align:-3px}
.pi.big{width:30px;height:30px;color:var(--mute)}
.pf-k{display:flex;align-items:center;gap:8px;font:500 10.5px/1.2 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--denim);margin:0}
.pf-k .pi{width:14px;height:14px}
.pf-hd{margin-bottom:22px}
.pf-title{font:400 clamp(34px,5vw,56px)/1.05 var(--serif);letter-spacing:-.01em;margin:10px 0 0;color:var(--ink)}
.pf-title em{font-style:italic;font-weight:500;color:var(--denim)}
.pf-tabs{display:flex;gap:4px 26px;border-bottom:1px solid var(--line);margin-bottom:30px;overflow-x:auto;scrollbar-width:none}
.pf-tabs::-webkit-scrollbar{display:none}
.pf-tab{display:inline-flex;align-items:center;gap:8px;padding:12px 0 13px;font:500 13.5px/1 var(--sans);color:var(--mute);text-decoration:none;border-bottom:1.5px solid transparent;margin-bottom:-1px;white-space:nowrap}
.pf-tab:hover{color:var(--ink)}
.pf-tab.on{color:var(--ink);border-bottom-color:var(--ink)}
.pf-grid{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:clamp(24px,3.4vw,48px);align-items:start}
.pf-main{min-width:0;display:grid;gap:28px}
.pf-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:clamp(20px,2.6vw,32px)}
.pf-ch{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.pf-ch-top{margin-bottom:0}
.pf-h2{font:500 clamp(24px,2.6vw,30px)/1.1 var(--serif);margin:8px 0 0}
.pf-h3{font:500 20px/1.25 var(--serif);margin:8px 0 14px}
.pf-sub{margin:6px 0 0;color:var(--ink2);font:400 14.5px/1.5 var(--sans)}
.pf-muted{color:var(--mute);font:400 13.5px/1.5 var(--sans);margin:0}
.pf-muted.sm{font-size:12px;margin-top:8px}
.pf .btn.sm{padding:12px 18px;font-size:11px;letter-spacing:.16em;gap:8px;border-radius:999px}
.pf .btn.sm .pi{width:14px;height:14px}
.pf .pf-gbtn{background:#fff;color:var(--ink);border:1px solid var(--line);padding:11px 17px;max-width:none;border-radius:999px;font:500 11px/1 var(--mono);letter-spacing:.16em}
.pf .pf-gbtn:hover{border-color:var(--ink)}
.pf-redl{color:#a5372f!important}
.pf .pf-red{background:#a5372f}
.pf-confirm{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;font:500 13.5px var(--sans)}
.pf-acts{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:22px}
.pf-back{display:inline-flex;align-items:center;gap:7px;font:500 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);text-decoration:none}
.pf-back:hover{color:var(--ink)}
.pf-line{display:grid;gap:5px;margin:0 0 16px}
.pf-line>span{font:500 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.pf-line input,.pf-line textarea,.pf-ship input,.pf-ig input,.pf-compose textarea{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:7px 0 8px;font:400 15.5px/1.35 var(--sans);color:var(--ink);border-radius:0;outline:none}
.pf-line input:focus,.pf-line textarea:focus,.pf-ship input:focus,.pf-ig input:focus{border-bottom-color:var(--ink)}
.pf-line input[readonly]{color:var(--ink2)}
.pf-line textarea{min-height:76px;resize:vertical;border:1px solid var(--line);border-radius:8px;padding:12px}
/* intake card */
.pf-fileline{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:9px 0;margin:0 0 26px;font:400 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.pf-me{display:grid;grid-template-columns:200px minmax(0,1fr) 250px;gap:clamp(20px,2.6vw,36px)}
.pf-photo{position:relative;display:grid;justify-items:center;gap:8px;padding-top:6px}
.pf-clip{position:absolute;top:-6px;left:22px;width:26px;height:26px;color:var(--ink2);transform:rotate(-22deg);z-index:2}
.pf-ph{position:relative;width:100%;max-width:180px;aspect-ratio:4/5;background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:visible;display:grid;place-items:center}
.pf-ph img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.pf-init{font:400 54px var(--serif);color:var(--mute)}
.pf-up{position:absolute;right:-10px;bottom:-10px;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.pf-up:hover{border-color:var(--ink)}
.pf-phname{font:400 26px/1 var(--hand);color:var(--ink);margin-top:8px}
.pf-photo.sm .pf-ph{max-width:150px}
.pf-ship{display:grid;gap:4px;margin-top:20px}
.pf-ship>span{font:500 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.pf-ship input{font-size:14px}
.pf-ship2{display:grid;grid-template-columns:1.3fr .7fr .9fr;gap:8px}
.pf-ig{display:flex;align-items:center;gap:8px;margin-top:18px;color:var(--ink2)}
.pf-ig input{font-size:13.5px}
.pf-player{border:1px solid var(--line);border-radius:8px;padding:16px 18px 2px;margin-top:8px}
.pf-player .pf-k{margin-bottom:14px;color:var(--ink2)}
.pf-two{display:grid;grid-template-columns:1fr 110px;gap:14px}
.pf-kids{background:#fbf5cf;border:1px solid #efe2a0;border-radius:10px;padding:20px}
.pf-kids h3{display:flex;align-items:center;gap:8px;font:500 19px/1.2 var(--serif);margin:0 0 8px}
.pf-kids-l{font:600 14px/1.45 var(--sans);margin:0 0 6px}
.pf-kids-s{font:400 13px/1.5 var(--sans);color:var(--ink2);margin:0 0 16px}
.pf-aside{display:flex;align-items:flex-start;gap:6px;margin:6px 0 16px 34px;color:var(--ink2)}
.pf-up-a{width:18px;height:26px;flex:none}
.pf-aside .hand{font:400 21px/1.1 var(--hand)}
.pf-other{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px;cursor:pointer;color:var(--ink)}
.pf-other:hover{border-color:var(--ink)}
.pf-other b{display:block;font:600 14px/1.3 var(--sans)}
.pf-other small{font:400 12.5px var(--sans);color:var(--mute)}
.pf-sec{display:grid;gap:14px}
.pf-sech{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pf-sech .pf-k{color:var(--ink)}
.pf-minis{display:flex;flex-wrap:wrap;gap:12px}
.pf-mini{display:grid;gap:6px;min-width:150px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 18px;text-decoration:none;color:var(--ink)}
.pf-mini:hover{border-color:var(--ink)}
.pf-mini span{display:flex;align-items:center;gap:6px;font:500 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.pf-mini b{font:400 24px/1 var(--hand)}
/* family */
.pf-fam{display:grid;gap:20px}
.pf-fam.has{grid-template-columns:minmax(0,1fr)}
.pf-tags{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:flex-start;padding:4px 0 6px;border-bottom:1px solid var(--line)}
.pf-tag{display:grid;justify-items:center;text-decoration:none;color:var(--mute);transform-origin:50% 0;transition:transform .25s,color .2s}
.pf-tag-loop{width:14px;height:30px;margin-bottom:-6px;position:relative;z-index:1}
.pf-tag-b{position:relative;display:grid;place-items:center;width:58px;height:120px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px 0 10px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.pf-tag-b i{position:absolute;top:8px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;border:1px solid var(--line);background:var(--paper)}
.pf-tag-b b{writing-mode:vertical-rl;font:600 11px/1 var(--mono);letter-spacing:.24em;color:var(--ink)}
.pf-tag:hover{transform:rotate(-3deg);color:var(--ink)}
.pf-tag.on .pf-tag-b{border-color:var(--ink)}
.pf-tag.on{color:var(--ink)}
.pf-taphint{text-align:center;padding:10px 0}
.pf-fview{display:grid;grid-template-columns:180px minmax(0,1fr);gap:clamp(20px,3vw,40px);margin:20px 0 24px;align-items:start}
.pf-dl{display:grid;margin:0}
.pf-dl>div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.pf-dl dt,.pf-rv-f dt{font:500 10px/1.6 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.pf-dl dd,.pf-rv-f dd{margin:0;font:400 15px/1.45 var(--sans)}
.pf-bday{font:400 18px/1 var(--hand);color:var(--denim);margin-left:4px}
.pf-sizes{display:grid;grid-template-columns:1fr 1fr 2fr;gap:12px}
.pf-sizes>div{border:1px solid var(--line);border-radius:8px;padding:14px 16px;display:grid;gap:6px;align-content:start}
.pf-sizes span{font:500 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.pf-sizes b{font:500 15px var(--sans)}
.pf-sizes p{margin:0;font:400 14px/1.5 var(--sans);color:var(--ink2)}
.pf-fl{display:grid;gap:9px;margin:0 0 18px}
.pf-fl>span{font:500 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.pf-g2{display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;margin-top:10px}
.pf-chips{display:flex;flex-wrap:wrap;gap:7px}
.pf-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font:500 12.5px/1 var(--sans);color:var(--ink2);cursor:pointer}
.pf-chip:hover{border-color:var(--ink2)}
.pf-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pf-fedit .pf-ch{align-items:center}
.pf-divh{display:flex;align-items:center;gap:14px;margin-top:6px}
.pf-divh::before,.pf-divh::after{content:"";flex:1;height:1px;background:var(--line)}
.pf-divh span{font:500 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.pf-c{text-align:center}
.pf-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}
.pf-items.big{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.pf-item{display:grid;gap:6px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;text-decoration:none;color:var(--ink)}
.pf-item:hover{border-color:var(--ink)}
.pf-item img,.pf-noimg{width:100%;aspect-ratio:1;object-fit:contain;background:var(--paper);border-radius:6px}
.pf-item b{font:500 13px/1.3 var(--sans)}
.pf-item small{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--denim)}
.pf-friend{opacity:.78}
.pf-soon{font:500 9.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:6px 10px;color:var(--mute)}
.pf-friend-row{display:flex;gap:10px;margin:16px 0 14px}
.pf-friend-row input{flex:1;border:1px solid var(--line);border-radius:999px;padding:11px 16px;font:400 14px var(--sans);background:var(--paper)}
.pf-friend-ex{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pf-friend-ex li{display:flex;align-items:center;gap:12px;border:1px dashed var(--line);border-radius:8px;padding:10px 14px;font:400 13.5px var(--sans)}
.pf-av{width:28px;height:28px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font:600 12px var(--sans);color:var(--ink2)}
.pf-st{margin-left:auto;font:500 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.pf-st.on{color:#3d7a52}
/* requests / orders */
.pf-dash{border:1.5px dashed var(--line);border-radius:12px;padding:clamp(16px,2.4vw,28px);display:grid;gap:22px;background:rgba(255,255,255,.35)}
.rqs{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:18px}
.rq{position:relative;aspect-ratio:1;background:#fff;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.rq:hover{border-color:var(--ink);transform:translateY(-2px)}
.rq-a{flex:1;display:flex;flex-direction:column;padding:18px 18px 10px;text-decoration:none;color:var(--ink);min-height:0}
.rq-d{font:500 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.rq-t{font:500 19px/1.15 var(--serif);margin:10px 0 3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rq-s{font:400 12.5px var(--sans);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rq-p{font:600 17px var(--sans);margin:auto 0 12px}
.rq-note{display:flex;align-items:center;gap:8px;border:0;border-top:1px solid var(--line);background:none;padding:10px 14px 12px;text-align:left;font:400 11.5px/1.3 var(--sans);color:var(--ink2);cursor:pointer;border-radius:0 0 12px 12px}
.rq-note:hover{color:var(--ink);background:var(--paper)}
.rq-note em{margin-left:auto;font-style:normal;font-size:10px;border:1px solid var(--line);border-radius:999px;padding:2px 7px}
.stg-bar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px}
.stg-bar i{height:4px;border-radius:2px;background:var(--paper2)}
.stg-bar i.past{background:var(--denim-soft)}
.stg-bar i.now{background:var(--denim)}
.stg-t{margin:8px 0 0;font:400 12px var(--sans);color:var(--ink2)}
.stg-t b{font-weight:600;color:var(--ink)}
.stg.big{margin:22px 0 6px}
.stg.big .stg-bar i{height:5px}
.stg-l{list-style:none;padding:0;margin:9px 0 0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px}
.stg-l li{font:500 9.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.stg-l li.past{color:var(--ink2)}
.stg-l li.now{color:var(--denim);font-weight:700}
.pf-empty{display:grid;justify-items:center;text-align:center;gap:10px;padding:clamp(30px,5vw,56px) 16px}
.pf-empty h4{font:500 20px var(--serif);margin:4px 0 0}
.pf-empty p{max-width:420px;margin:0;font:400 14px/1.55 var(--sans);color:var(--ink2)}
.pf-empty.inline{padding:6px 0 2px;border-top:1px solid var(--line)}
.pf-empty.inline .pi.big{display:none}
.pf-empty.sm{padding:22px 14px;border:1.5px dashed var(--line);border-radius:10px}
.pf-empty.sm p{font-size:13px;color:var(--mute)}
.pf-or{font:500 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.pf-dash.pf-empty{border-style:dashed}
/* order review */
.pf-dtop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pf-rv-h{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding-bottom:16px;border-bottom:1px solid var(--line)}
.pf-rv-h .pf-muted{font:400 11px var(--mono);letter-spacing:.08em;display:block;margin-top:6px}
.pf-stchip{font:600 9.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--denim);border:1px solid var(--denim-soft);background:#f4f7fb;border-radius:999px;padding:7px 12px;white-space:nowrap}
.pf-rv-t{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-top:18px}
.pf-rv-name{font:500 clamp(26px,3vw,36px)/1.08 var(--serif);margin:0 0 4px}
.pf-rv-p{font:600 24px var(--sans);white-space:nowrap}
.pf-rv-f{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px 26px;margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.pf-rv-f>div{display:grid;gap:4px}
.pf-rv-items{display:grid;gap:10px;margin-top:22px}
.pf-rv-it{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:10px}
.pf-rv-it img{width:56px;height:56px;object-fit:contain;background:var(--paper);border-radius:6px}
.pf-rv-it b{display:block;font:500 14px var(--sans)}
.pf-rv-it small{font:400 12.5px var(--sans);color:var(--mute)}
.pf-rv-notes{margin-top:24px;display:grid;gap:10px}
.pf-rv-notes>span{font:500 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.pf-pchips{display:flex;flex-wrap:wrap;gap:8px}
.pf-pchips span{background:#f4f7fb;border:1px solid #e3eaf3;border-radius:6px;padding:8px 12px;font:400 13px/1.4 var(--sans);color:var(--ink2)}
.pf-ship-l{margin-top:18px}
.pf-ship-l .mono{font-size:10px;letter-spacing:.2em;text-transform:uppercase;margin-right:8px}
.pf-compose textarea{border:1px solid var(--line);border-radius:8px;padding:12px 14px;min-height:90px;resize:vertical}
.pf-compose textarea:focus{border-color:var(--ink)}
.pf-compose .pf-acts{margin-top:12px}
.pf-rule{margin:12px 0 0;font:400 13px/1.5 var(--sans);color:var(--ink2)}
.pf-notes{display:grid;gap:10px;margin-top:22px}
.pf-note{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;opacity:.72}
.pf-note.latest{opacity:1;border-color:var(--ink2)}
.pf-note-d{font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.pf-note.latest .pf-note-d{color:var(--denim)}
.pf-note p{margin:6px 0 0;font:400 14.5px/1.5 var(--sans);white-space:pre-wrap}
.pf-modal{position:fixed;z-index:90;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 28px));max-height:calc(100vh - 60px);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 26px 24px;box-shadow:0 20px 60px rgba(0,0,0,.14)}
.pf-modal .x{position:absolute;top:14px;right:14px}
.pf-ok{color:#3d7a52;font:500 13.5px var(--sans)}
.pf-pw form{max-width:380px;margin-top:16px}
/* side rail */
.pf-rail{position:sticky;top:90px;display:grid;gap:30px;padding-left:clamp(20px,2.4vw,32px);border-left:1px solid var(--line)}
.pf-rail-sec{display:grid;gap:10px}
.pf-rh{font:500 21px/1.15 var(--serif);margin:0 0 4px}
.pf-rboxes{display:grid;gap:10px}
.pf-rbox{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px 8px 8px;text-align:left;cursor:pointer;color:var(--ink)}
.pf-rbox:hover{border-color:var(--ink)}
.pf-rbox-img{width:64px;height:58px;flex:none;position:relative;overflow:hidden}
.pf-rbox-img .bxs{width:100%;height:100%}
.pf-rbox b{display:block;font:600 13.5px var(--sans)}
.pf-rbox small{font:400 12px var(--sans);color:var(--mute)}
.pf-rwish{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pf-rwish a{background:#fff;border:1px solid var(--line);border-radius:8px;aspect-ratio:1;display:grid;place-items:center;padding:4px}
.pf-rwish img{width:100%;height:100%;object-fit:contain}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:1100px){.pf-me{grid-template-columns:180px minmax(0,1fr)}.pf-c3{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.pf-aside{display:none}}
@media (max-width:900px){.pf-grid{grid-template-columns:1fr}.pf-rail{position:static;border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:26px;grid-template-columns:1fr 1fr;gap:20px}}
@media (max-width:640px){
  .pf{padding:22px 16px 110px}
  .pf-title{font-size:36px}
  .pf-tabs{gap:20px;margin:0 -16px 22px;padding:0 16px}
  .pf-card{padding:18px;border-radius:10px}
  .pf-ch{flex-wrap:wrap}
  .pf-me{grid-template-columns:1fr}
  .pf-c1{display:grid;grid-template-columns:118px 1fr;gap:6px 18px;align-items:start}
  .pf-c1 .pf-photo{grid-row:span 2}
  .pf-c1 .pf-ship{margin-top:0}
  .pf-c1 .pf-ig{grid-column:1/-1}
  .pf-c3{grid-template-columns:1fr}
  .pf-fileline{font-size:9px;letter-spacing:.1em}
  .pf-fview{grid-template-columns:1fr;justify-items:stretch}
  .pf-fview .pf-photo{justify-self:center;width:150px}
  .pf-dl>div{grid-template-columns:110px 1fr}
  .pf-sizes{grid-template-columns:1fr 1fr}.pf-sprefs{grid-column:1/-1}
  .pf-g2{grid-template-columns:1fr}
  .rqs{grid-template-columns:1fr 1fr;gap:10px}
  .rq-a{padding:13px 13px 8px}.rq-t{font-size:15.5px;margin-top:7px}.rq-s{font-size:11px}.rq-p{font-size:14.5px;margin-bottom:9px}
  .rq-note{padding:8px 10px 10px;font-size:10px}.rq-note span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .stg-t{font-size:10.5px}
  .stg-l{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);row-gap:6px}
  .pf-rv-t{flex-direction:column;align-items:flex-start;gap:8px}
  .pf-rail{grid-template-columns:1fr}
  .pf-friend-row{flex-direction:column}
  .pf-tag-b{width:50px;height:104px}
}
.pf-rwish{grid-template-columns:repeat(3,minmax(0,1fr))}
.pf-rwish a{min-width:0;overflow:hidden}
.pf-rail{min-width:0}
.pf-noimg{display:grid;place-items:center;color:var(--mute)}
.pf-noimg .pi{width:26px;height:26px}
.stg-l{border:0;counter-reset:none}
.stg-l li{border:0;padding:0;background:none}
.stg-l li::before,.stg-l li::after{content:none}
@media (max-width:900px){.pf-grid{grid-template-columns:minmax(0,1fr)}.pf-rail{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:640px){.rqs{grid-template-columns:repeat(2,minmax(0,1fr))}.pf-rail{grid-template-columns:minmax(0,1fr)}.pf-me,.pf-c3{grid-template-columns:minmax(0,1fr)}.pf-c1{grid-template-columns:118px minmax(0,1fr)}.pf-wrap{overflow-x:clip}}
.pf-main>*{min-width:0}
@media (max-width:640px){.rq{aspect-ratio:auto;min-height:196px}.rq-s{display:none}.rq-t{-webkit-line-clamp:3}}
.ord .ostage{align-items:center}
.ord .ostage>span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-right:4px}
.ord .onotes{display:grid;gap:8px;margin:12px 0;border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:#fff}
.ord .onotes>b{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--denim)}
.ord .onotes em{color:var(--red);font-style:normal}
.ord .onotes>div{opacity:.7;border-top:1px solid var(--line);padding-top:8px}
.ord .onotes>div.latest{opacity:1}
.ord .onotes small{font-size:10px;color:var(--mute)}
.ord .onotes p{margin:3px 0 0;font-size:14px}
.menu a[href="/shop"],.menu a[href="/collections"]{text-decoration-skip-ink:none}

/* ===== nav: locker = icon-only cart, far right, with a small count badge ===== */
.hdr .basketbtn{position:relative;border:0;background:none;padding:6px 4px;gap:0;border-radius:0;color:var(--ink)}
.hdr .basketbtn:hover{border-bottom-color:transparent;opacity:.7}
.hdr .basketbtn .cart-ico{width:23px;height:23px}
.hdr .basketbtn .cart-n{position:absolute;top:-1px;right:-7px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--ink);color:#fff;font:600 9px/16px var(--mono);letter-spacing:0;display:block;text-align:center}
@media (max-width:620px){.hdr .basketbtn{padding:6px 4px}}

/* ===== bottom box banner: taller (≈1 inch), boxes clearly visible ===== */
.bxbar-in{height:104px;max-width:1240px}
.bxbar-car{height:104px}
.bxb{width:118px;bottom:16px;transform:translateX(calc(-50% + var(--d) * 118px)) scale(calc(1 - min(1, max(var(--d), calc(var(--d) * -1))) * .38))}
.bxb-lab{bottom:-14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:2px 8px;opacity:1;background:#fffaf0;border:1px solid rgba(0,0,0,.06)}
.bxb:not(.on) .bxb-lab{opacity:0}
.bxbar-l{font-size:11.5px;letter-spacing:.18em}
.bxb.pop{transform:translateX(-50%) translateY(-130px) scale(2.1)}
body.has-bxbar{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
body.has-bxbar .chat-fab,body.has-bxbar .fab{bottom:calc(120px + env(safe-area-inset-bottom))!important}
@media (max-width:760px){.bxbar-in{height:100px;padding:0 14px}.bxbar-car{height:100px}.bxb{width:104px;bottom:16px;transform:translateX(calc(-50% + var(--d) * 92px)) scale(calc(1 - min(1, max(var(--d), calc(var(--d) * -1))) * .4))}.bxb.pop{transform:translateX(-50%) translateY(-120px) scale(2)}body.has-bxbar{padding-bottom:calc(100px + env(safe-area-inset-bottom))}}

/* ===== "Here's your locker" ===== */
.lk{position:fixed;z-index:90;inset:24px;margin:auto;max-width:1180px;background:var(--paper);border-radius:14px;overflow:auto;overscroll-behavior:contain;box-shadow:0 24px 70px rgba(0,0,0,.18)}
.lk-x{position:sticky;top:16px;margin:16px 16px -54px auto;z-index:3}
.lk-in{padding:clamp(28px,4vw,52px) clamp(20px,4vw,56px) 40px}
.lk-hd{text-align:center;margin-bottom:clamp(24px,3vw,40px)}
.lk-k{font:500 10.5px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--denim)}
.lk-title{font:400 clamp(34px,4.6vw,54px)/1.05 var(--serif);margin:10px 0 0;letter-spacing:-.01em}
.lk-sub{margin:10px 0 0;font:400 15px var(--sans);color:var(--ink2)}
.lk-cols{display:grid;gap:clamp(18px,2.6vw,34px);align-items:start}
.lk.two .lk-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.lk.one .lk-cols{max-width:620px;margin:0 auto}
.lk-col{background:#fff;border:1px solid var(--line);border-radius:12px;padding:clamp(18px,2.2vw,28px)}
.lk-colh{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px}
.lk-h{font:500 italic clamp(24px,2.4vw,30px)/1.1 var(--serif);margin:6px 0 0}
.lk-kids .lk-k{color:#a88a1c}
.lk-n{font:500 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.lk-photo{border-radius:8px;overflow:hidden;background:#f2e5d2;aspect-ratio:3/2}
.lk-photo img{width:100%;height:100%;object-fit:cover;display:block}
.lk-list{list-style:none;margin:18px 0 0;padding:0}
.lk-it{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px 0;border-top:1px solid var(--line)}
.lk-thumb{display:block;width:64px;height:64px;border-radius:8px;background:var(--paper);overflow:hidden}
.lk-thumb img{width:100%;height:100%;object-fit:contain}
.lk-txt{display:grid;gap:3px;min-width:0}
.lk-name{font:500 15.5px/1.3 var(--sans);color:var(--ink);text-decoration:none}
.lk-name:hover{text-decoration:underline}
.lk-picks{font:400 13px/1.45 var(--sans);color:var(--ink2)}
.lk-note{font-style:italic;color:var(--mute)}
.lk-links{display:flex;gap:14px;margin-top:4px}
.lk-links a,.lk-links button{font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);background:none;border:0;padding:0 0 1px;border-bottom:1px solid var(--line);cursor:pointer;text-decoration:none}
.lk-links a:hover,.lk-links button:hover{color:var(--ink);border-bottom-color:var(--ink)}
.lk-price{font:600 14px var(--sans);white-space:nowrap}
.lk-tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--ink);padding-top:12px;margin:2px 0 0}
.lk-tot .mono{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.lk-empty{text-align:center;padding:26px 10px 10px}
.lk-empty p{margin:0 0 14px;font:400 14.5px/1.5 var(--sans);color:var(--ink2)}
.lk-acts{display:flex;justify-content:center;align-items:center;gap:22px;flex-wrap:wrap;margin-top:clamp(26px,3vw,40px);padding-top:24px;border-top:1px solid var(--line)}
.lk.closed .lk-photo{background:#f3e9dc}
@media (max-width:760px){
  .lk{inset:0;border-radius:0}
  .lk.two .lk-cols{grid-template-columns:minmax(0,1fr)}
  .lk-in{padding:28px 16px 30px}
  .lk-it{grid-template-columns:56px minmax(0,1fr);}
  .lk-thumb{width:56px;height:56px}
  .lk-price{grid-column:2}
  .lk-acts{flex-direction:column-reverse;align-items:stretch;position:sticky;bottom:0;background:var(--paper);margin:24px -16px -30px;padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
  .lk-acts .btn{justify-content:center;max-width:none;text-align:center}
}
.lk-acts{position:sticky;bottom:0;background:linear-gradient(rgba(247,245,241,.0),var(--paper) 22%);z-index:2;margin-bottom:-40px;padding-bottom:22px}
.hdr .basketbtn .cart-n{min-width:17px;height:17px;font:600 10px/17px var(--mono);top:-3px;right:-8px}
/* /locker as a real page */
.lk.lk-page{position:static;inset:auto;margin:0 auto;max-width:1240px;background:none;border-radius:0;box-shadow:none;overflow:visible}
.lk-page .lk-in{padding:clamp(34px,5vw,64px) var(--pad) 60px}
.lk-page .lk-acts{position:static;background:none;margin-bottom:0;padding-bottom:0}
body.lk-page-on main{background:var(--paper)}
@media (max-width:760px){.lk-page .lk-in{padding:26px 16px 0}.lk-page .lk-acts{position:sticky;bottom:0;background:var(--paper);margin:24px -16px 0;padding:14px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);z-index:5}}


/* ===== Kids Lab hero: Jordi's full-bleed background (box on the rug, Fin the orca), copy on the cream to the right ===== */
body.kl-page{--klbg:#f5e6d4}
body.kl-page .hdr{background:rgba(245,230,212,.55);border-bottom-color:transparent}
.kl-hero{position:relative;overflow:hidden;margin-top:-63px;min-height:max(640px,100vh);display:flex;align-items:center;background:#f5e6d4}
.klh-stage{position:absolute;left:0;top:50%;transform:translateY(-50%);aspect-ratio:1534/1025;width:max(100%,calc(max(640px,100vh) * 1534 / 1025));z-index:0}
.klh-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.klh-stk{z-index:2}
.klh-copy{position:relative;z-index:2;margin-left:52%;width:min(40%,560px);padding:110px 0 60px}
.klh-copy .kl-h{font-size:clamp(44px,4.6vw,76px);line-height:.98;margin:12px 0 18px}
.klh-copy .lede{max-width:500px}
.klh-copy .kl-note{position:relative;margin:10px 0 26px}
.klh-arrow{position:absolute;right:calc(100% + 10px);top:-6px;width:84px;height:38px;color:#2d4f9e}
.klh-copy .kl-sq-wrap{position:relative}
.klh-copy .kl-resume{margin-top:18px}
@media (max-width:1000px){
  .kl-hero{display:block;min-height:0;margin-top:-57px;overflow:visible}
  .klh-stage{position:relative;top:0;transform:none;left:-3vw;width:165vw;margin-bottom:-14vw}
  .kl-hero{overflow:hidden}
  .klh-copy{margin:0;width:auto;padding:0 18px 40px}
  .klh-copy .kl-h{font-size:40px}
  .klh-arrow{display:none}
}
@media (prefers-reduced-motion:reduce){.klh-stk.drop{animation:none}}
.kl-ex-in:not(:has(.kl-exbox)){grid-template-columns:minmax(0,1fr)}

/* ===== Oct 18 corrections ===== */
/* Kids Lab hero squares: back to the hollow outlined squares (as with the old 1/2/4), now carrying the style names */
.klh-copy .kl-sqs{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px;max-width:540px}
.klh-copy .kl-sq{aspect-ratio:1.5/1;align-items:flex-start;justify-content:flex-start;text-align:left;gap:0;padding:14px 12px 12px;background:transparent;border:1px solid rgba(27,27,27,.6);border-radius:0;transform:none}
.klh-copy .kl-sq:hover{background:rgba(255,255,255,.28);transform:none}
.klh-copy .kl-sq.on{background:transparent;color:#1b1b1b;border-color:#1b1b1b;box-shadow:inset 0 0 0 1px #1b1b1b}
.klh-copy .kl-sq b{font:700 clamp(17px,1.5vw,22px)/1.04 var(--serif);letter-spacing:-.01em;overflow-wrap:anywhere}
.klh-copy .kl-sq small{display:block;margin-top:auto;font:600 9.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.klh-copy .kl-sq em{display:block;margin-top:5px;font:400 11px/1.25 var(--sans);font-style:normal;color:#8a8070}
.klh-copy .kl-sq-wrap.has-mm{grid-template-columns:1fr;gap:16px}
.klh-copy .kl-sq-wrap .mm-burst{justify-self:start}
@media (max-width:1000px){.klh-copy .kl-sqs{grid-template-columns:1fr 1fr;gap:8px}.klh-copy .kl-sq{aspect-ratio:1.6/1}.klh-copy .kl-sq b{font-size:21px}}
/* Mini & Me starburst: die-cut sticker edge, no motion */
.mm-wrapb{display:inline-block;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 2px 0 #fff) drop-shadow(-2px -2px 0 #fff) drop-shadow(2px -2px 0 #fff) drop-shadow(-2px 2px 0 #fff) drop-shadow(0 4px 6px rgba(40,30,10,.18));line-height:0}
.mm-burst,.mm-burst:hover{animation:none!important;transform:none!important}
.mm-wrapb:hover{filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 2px 0 #fff) drop-shadow(-2px -2px 0 #fff) drop-shadow(2px -2px 0 #fff) drop-shadow(-2px 2px 0 #fff) drop-shadow(0 6px 10px rgba(40,30,10,.28))}
/* nav locker icon */
.hdr .basketbtn .lockr-ico{width:22px;height:24px;display:block}
/* /checkout desktop split: tag on the box's front-right, no pin/string */
.co-tag:before,.co-tag:after,.co-bleed .co-tag:before,.co-bleed .co-tag:after,.co-bleed .co-stage .co-tag:before,.co-bleed .co-stage .co-tag:after{content:none!important;display:none!important}
.co-bleed .co-stage .co-tag{padding-left:2.4cqw}
@media (min-width:901px){.co-bleed .co-stage .co-tag{left:47%;top:73%}}
@media (max-width:900px){.co-bleed .co-stage .co-tag{padding-left:2.6cqw}}
@media (min-width:1001px){
  .klh-copy .kl-sq-wrap.has-mm{display:block;position:relative;max-width:540px}
  .klh-copy .kl-sq-wrap .mm-wrapb{position:absolute;left:calc(33.33% + 34px);bottom:-14px}
  .klh-copy .kl-sq-wrap .mm-burst{width:112px;height:112px;font-size:12px}
}
/* Kids Lab hero: all styles + categories (11) — smaller squares, 4 per row on desktop */
.klh-copy .kl-sqs{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:560px}
.klh-copy .kl-sq{aspect-ratio:1.22/1;padding:10px 10px 9px}
.klh-copy .kl-sq b{font-size:clamp(14px,1.12vw,17px);line-height:1.05}
.klh-copy .kl-sq small{font-size:8.5px;letter-spacing:.13em}
.klh-copy .kl-sq em{font-size:10px;margin-top:3px}
.klh-copy .kl-h{font-size:clamp(40px,4vw,68px);margin:8px 0 12px}
.klh-copy .kl-note{margin:4px 0 16px}
.kl-soon{padding:22px 0 8px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.kl-soon-t{font:400 24px/1.25 var(--hand);color:#2d4f9e;margin:0}
@media (min-width:1001px){
  .klh-copy .kl-sq-wrap.has-mm{max-width:560px}
  .klh-copy .kl-sq-wrap .mm-wrapb{left:calc(75% + 10px);bottom:-6px}
  .klh-copy .kl-sq-wrap .mm-burst{width:106px;height:106px;font-size:11.5px;padding:15px}
}
@media (max-width:1000px){.klh-copy .kl-sqs{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.klh-copy .kl-sq{aspect-ratio:1.05/1}.klh-copy .kl-sq b{font-size:15.5px}}
.klh-copy .kl-sq b{overflow-wrap:normal;hyphens:none}
.kl-soon{grid-column:1/-1}
@media (max-width:1000px){.klh-copy .kl-sq b{font-size:14px}}

/* ===== "Inside your locker" strip above the footer (SEED.lockerStrip = 'footer') ===== */
.lks{border-top:1px solid var(--line);background:transparent}
.lks-in{padding-top:34px;padding-bottom:38px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px 34px}
.lks-h{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.lks-h .lockr-ico{width:22px;height:24px;flex:none}
.lks-t{font:700 italic 24px/1.1 var(--serif)}
.lks-n{font-size:10px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase;margin-left:4px}
.lks-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;min-height:96px}
.lks-stk{display:block;width:84px;height:92px;transform:rotate(calc((var(--k) - 1) * 4deg));transition:transform .25s;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 2px 0 #fff) drop-shadow(-2px -2px 0 #fff) drop-shadow(0 6px 8px rgba(40,30,10,.18))}
.lks-stk:nth-child(odd){transform:rotate(calc(var(--k) * -3deg - 2deg))}
.lks-stk img{width:100%;height:100%;object-fit:contain;display:block}
.lks-stk:hover{transform:translateY(-3px) rotate(0)}
.lks-kids{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink)}
.lks-kbox{display:block;width:118px}
.lks-kbox .bx{width:100%}
.lks-kl{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.lks-go{white-space:nowrap}
@media (max-width:760px){
  .lks-in{grid-template-columns:1fr;padding-top:26px;padding-bottom:30px;gap:14px}
  .lks-row{gap:14px}
  .lks-stk{width:68px;height:76px}
  .lks-kbox{width:100px}
  .lks-t{font-size:22px}
}

/* ===== Custom order board v3 (/request): Jordi's Claude components (her CSS, scoped to .b3), our fonts + colours ===== */
.b3.b3 .shell{display:grid;grid-template-columns:1fr 380px;grid-template-areas:'feed board';height:100vh;}
.b3.b3 .ql{grid-area:feed;overflow-y:auto;background:var(--paper);scroll-behavior:smooth;}
.b3.b3 .ql::-webkit-scrollbar{width:3px;}
.b3.b3 .ql::-webkit-scrollbar-thumb{background:var(--b3ghost);}
.b3.b3 .qr{grid-area:board;display:flex;flex-direction:column;background:var(--b3cream);border-left:1px solid var(--b);height:100vh;}
@media(max-width:860px){.b3.b3 .shell{display:block;height:auto;min-height:calc(var(--vvh,100vh));}.b3.b3 .qr{position:sticky;top:0;z-index:60;height:calc(var(--vvh,100vh)*0.46);border-left:none;border-bottom:1.5px solid var(--bm);box-shadow:0 10px 28px rgba(0,0,0,0.09);}.b3.b3 .ql{overflow:visible;height:auto;min-height:calc(var(--vvh,100vh)*0.6);}.b3.b3 .chips-wrap{top:calc(var(--vvh,100vh)*0.46);}}
.b3.b3 .qr-bar{flex-shrink:0;min-height:54px;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--b);background:var(--b3cream);}
.b3.b3 .qr-live{display:flex;align-items:center;gap:6px;}
.b3.b3 .qr-dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:b3pulse 2s infinite;}
@keyframes b3pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}
.b3.b3 .qr-live-txt{font-family:var(--mono);font-size:8px;letter-spacing:0.18em;color:var(--red);}
.b3.b3 .qr-count{font-family:var(--mono);font-size:8px;letter-spacing:0.1em;color:var(--mute);margin-left:8px;}
.b3.b3 .qr-est{text-align:right;}
.b3.b3 .qr-est-label{font-family:var(--mono);font-size:7px;letter-spacing:0.18em;color:var(--mute);text-transform:uppercase;display:block;}
.b3.b3 .qr-est-num{font-family:var(--serif);font-size:26px;letter-spacing:-0.02em;color:var(--ink);line-height:1.1;font-style:italic;}
.b3.b3 .qr-x{font-family:var(--mono);font-size:12px;border:1px solid var(--bm);background:#fff;border-radius:20px;width:30px;height:30px;cursor:pointer;color:var(--ink2);flex-shrink:0;margin-left:6px;transition:all .14s;}
.b3.b3 .qr-x:hover{color:var(--ink);border-color:var(--ink);}
.b3.b3 .qr-stream{flex:1;overflow-y:auto;position:relative;padding:14px 14px 20px;background:
  repeating-linear-gradient(0deg,transparent,transparent 26px,rgba(27,27,27,0.025) 26px,rgba(27,27,27,0.025) 27px),var(--b3board);}
.b3.b3 .qr-stream::-webkit-scrollbar{width:2px;}
.b3.b3 .qr-stream::-webkit-scrollbar-thumb{background:var(--b3ghost);}
.b3.b3 .qr-empty{text-align:center;padding:38px 10px;}
.b3.b3 .qr-empty-circle{width:42px;height:42px;border:1.5px dashed var(--b3ghost);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-family:var(--serif);font-size:22px;color:var(--b3ghost);}
.b3.b3 .qr-empty-main{font-family:var(--serif);font-size:16px;letter-spacing:0.04em;color:var(--b3ghost);margin-bottom:3px;}
.b3.b3 .qr-empty-sub{font-family:var(--mono);font-size:8px;letter-spacing:0.12em;color:var(--b3ghost);}
.b3.b3 .vb{position:relative;width:100%;}
.b3.b3 .pin{position:absolute;width:42%;background:#fff;padding:16px 8px 12px;box-shadow:1px 5px 14px rgba(0,0,0,0.18);transform:rotate(var(--r,0deg));z-index:1;text-align:center;border-radius:2px;}
.b3.b3 .pin::before{content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:9px;height:9px;background:var(--red);border-radius:50%;box-shadow:0 2px 3px rgba(0,0,0,0.3);z-index:2;}
.b3.b3 .pin-ic{display:flex;justify-content:center;margin-bottom:9px;color:var(--ink);}
.b3.b3 .pin-ic svg{height:30px;width:auto;}
.b3.b3 .pin-lb{font-family:var(--mono);font-size:7.5px;letter-spacing:0.18em;color:var(--ink2);text-transform:uppercase;line-height:1.7;}
.b3.b3 .pin.bub{background:none;box-shadow:none;padding:7px 0 0;width:auto;max-width:48%;border-radius:0;filter:drop-shadow(1px 3px 4px rgba(0,0,0,0.25));}
.b3.b3 .pin-k{display:inline-block;font-family:var(--mono);font-size:6.5px;letter-spacing:0.16em;color:var(--ink2);text-transform:uppercase;background:#fff;padding:2px 8px;border-radius:9px;margin-bottom:1px;}
.b3.b3 .pin-v{font-family:var(--serif);font-size:19px;color:var(--ink);line-height:1.1;font-style:italic;text-shadow:-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff,-3px 0 0 #fff,3px 0 0 #fff,0 -3px 0 #fff,0 3px 0 #fff;}
.b3.b3 .env{position:absolute;width:150px;z-index:5;transform:rotate(var(--r,0deg));filter:drop-shadow(1px 5px 10px rgba(0,0,0,0.18));}
.b3.b3 .env::before{content:'';position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:9px;height:9px;background:var(--red);border-radius:50%;box-shadow:0 2px 3px rgba(0,0,0,0.3);z-index:6;}
.b3.b3 .env svg{width:100%;display:block;}
.b3.b3 .env-cap{font-family:var(--hand);font-size:17px;color:var(--ink);text-align:center;margin-top:1px;transform:rotate(-1.5deg);}
.b3.b3 .env.seal svg{animation:b3envpop .55s cubic-bezier(.3,1.4,.5,1);}
@keyframes b3envpop{0%{transform:scale(1.14) rotate(-4deg);}60%{transform:scale(.96);}100%{transform:scale(1);}}
.b3.b3 .spin{position:absolute;width:46%;transform:rotate(var(--r,0deg));z-index:2;}
.b3.b3 .spin::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:9px;height:9px;background:var(--red);border-radius:50%;box-shadow:0 2px 3px rgba(0,0,0,0.3);z-index:3;}
.b3.b3 .spin img{width:100%;display:block;filter:drop-shadow(1px 4px 7px rgba(0,0,0,0.25));}
.b3.b3 .spin.raw img{border-radius:12px;border:5px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,0.18);filter:none;}
.b3.b3 .spin-badge{position:absolute;top:2px;right:0;z-index:3;font-size:12px;background:rgba(255,255,255,0.95);border-radius:20px;padding:3px 7px;box-shadow:0 1px 4px rgba(0,0,0,0.2);font-family:var(--sans);font-weight:700;color:var(--ink);}
.b3.b3 .spin-note{font-family:var(--hand);font-size:16px;color:var(--ink2);text-align:center;line-height:1.1;margin-top:2px;transform:rotate(-1.2deg);}
.b3.b3 .spin.edit{width:56%;z-index:3;}
.b3.b3 .spin-editlabel{font-family:var(--hand);font-size:17px;color:var(--ink);text-align:center;line-height:1.1;margin-top:3px;transform:rotate(1deg);}
.b3.b3 .badge-pin{position:absolute;width:88px;height:88px;border-radius:50%;background:var(--butter);border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,0.2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transform:rotate(var(--r,0deg));z-index:4;text-align:center;}
.b3.b3 .badge-pin b{font-size:18px;line-height:1;}
.b3.b3 .badge-pin span{font-family:var(--mono);font-size:6.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);line-height:1.35;padding:0 8px;}
.b3.b3 .qr-send{flex-shrink:0;padding:10px 14px 12px;border-top:1px solid var(--b);background:var(--b3cream);display:none;}
.b3.b3 .qr-send.show{display:block;}
.b3.b3 .qr-send-btn{width:100%;font-family:var(--serif);font-size:14px;letter-spacing:0.02em;font-style:italic;background:var(--ink);color:#fff;border:none;padding:13px 18px;cursor:pointer;transition:opacity .15s;display:flex;align-items:center;justify-content:center;gap:8px;}
.b3.b3 .qr-send-btn:hover{opacity:.8;}
.b3.b3 .pip{width:6px;height:6px;background:var(--red);border-radius:50%;flex-shrink:0;display:inline-block;}
.b3.b3 .ql-bar{height:48px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--b);background:#fff;}
.b3.b3 .ql-logo{font-family:var(--serif);font-size:15px;letter-spacing:0.02em;color:var(--ink);font-style:italic;}
.b3.b3 .ql-step{font-family:var(--mono);font-size:8px;letter-spacing:0.14em;color:var(--mute);text-transform:uppercase;}
.b3.b3 .chips-wrap{position:sticky;top:0;z-index:40;background:rgba(249,248,246,0.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--b);padding:8px 14px;display:none;align-items:center;gap:8px;}
.b3.b3 .chips-wrap.show{display:flex;}
.b3.b3 .chips-label{font-family:var(--mono);font-size:7px;letter-spacing:0.2em;color:var(--mute);text-transform:uppercase;flex-shrink:0;}
.b3.b3 .chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;}
.b3.b3 .chips::-webkit-scrollbar{display:none;}
.b3.b3 .chipp{flex-shrink:0;display:flex;align-items:baseline;gap:5px;background:#fff;border:1px solid var(--bm);padding:4px 9px;cursor:pointer;transition:all .14s;border-radius:2px;}
.b3.b3 .chipp:hover{border-color:var(--ink);}
.b3.b3 .chipp-k{font-family:var(--mono);font-size:6px;letter-spacing:0.12em;color:var(--mute);text-transform:uppercase;}
.b3.b3 .chipp-v{font-family:var(--serif);font-size:12px;color:var(--ink);font-style:italic;white-space:nowrap;}
.b3.b3 .chipp.hearts{background:var(--butter);border-color:var(--b3yel2);}
.b3.b3 .feed{padding:18px 16px 30px;display:flex;flex-direction:column;gap:16px;align-items:center;}
.b3.b3 .fcard{width:100%;max-width:580px;background:#fff;border:1px solid var(--b);box-shadow:0 2px 10px rgba(0,0,0,0.04);padding:24px 22px 22px;opacity:0;transform:translateY(14px);transition:opacity .35s ease,transform .35s ease;scroll-margin-top:64px;border-radius:2px;}
.b3.b3 .fcard.in{opacity:1;transform:translateY(0);}
.b3.b3 .fq-eyebrow{font-family:var(--mono);font-size:7.5px;letter-spacing:0.22em;color:var(--mute);text-transform:uppercase;margin-bottom:8px;}
.b3.b3 .fq-title{font-family:var(--serif);font-size:clamp(24px,4.5vw,32px);letter-spacing:-0.01em;color:var(--ink);line-height:1.05;margin-bottom:6px;}
.b3.b3 .fq-hint{font-size:12.5px;color:var(--mute);font-style:italic;line-height:1.5;margin-bottom:16px;}
.b3.b3 .optgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.b3.b3 .opt{padding:16px 14px;border:1px solid var(--b);background:var(--b3cream);cursor:pointer;transition:all .16s;border-radius:2px;text-align:left;}
.b3.b3 .opt:hover{background:var(--b3blue);border-color:var(--b3blue2);}
.b3.b3 .opt.on{background:var(--b3blue);border-color:var(--b3blue2);}
.b3.b3 .opt-name{font-family:var(--serif);font-size:17px;color:var(--ink);line-height:1.1;margin-bottom:3px;}
.b3.b3 .opt-sub{font-size:11px;color:var(--mute);line-height:1.4;}
.b3.b3 .pc-ic{height:36px;color:var(--ink);margin-bottom:9px;display:flex;}
.b3.b3 .pc-ic svg{height:36px;width:auto;}
.b3.b3 .htrow{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;padding-top:6px;}
.b3.b3 .htitem{display:flex;flex-direction:column;align-items:center;cursor:pointer;flex:1;min-width:92px;max-width:132px;transition:transform .22s;}
.b3.b3 .htitem:nth-child(1){transform:rotate(-1.5deg);}
.b3.b3 .htitem:nth-child(2){transform:rotate(.8deg);}
.b3.b3 .htitem:nth-child(3){transform:rotate(-2deg);}
.b3.b3 .htitem:hover{transform:translateY(-8px) rotate(0deg);}
.b3.b3 .htitem.on{transform:translateY(-5px) rotate(0deg);}
.b3.b3 .htitem.on .htbody{background:var(--butter);border-color:var(--b3yel2);}
.b3.b3 .htcord{width:48px;height:40px;flex-shrink:0;margin-bottom:-2px;}
.b3.b3 .htbody{width:100%;background:#fff;border:1px solid var(--bm);border-radius:3px;padding:22px 10px 13px;position:relative;box-shadow:0 2px 8px rgba(0,0,0,0.07);text-align:center;transition:all .2s;}
.b3.b3 .htbody::before{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:var(--paper2);border:1px solid rgba(27,27,27,0.15);}
.b3.b3 .htic{display:flex;justify-content:center;color:var(--ink);height:36px;margin-bottom:8px;align-items:flex-end;}
.b3.b3 .htic svg{max-height:36px;width:auto;}
.b3.b3 .htname{font-family:var(--serif);font-size:15px;color:var(--ink);line-height:1.1;}
.b3.b3 .htsub{font-family:var(--mono);font-size:7.5px;color:var(--mute);letter-spacing:.06em;margin-top:4px;line-height:1.5;}
.b3.b3 .htitem.urgent .htname,.b3.b3 .htitem.urgent .htic{color:var(--red);}
.b3.b3 .stkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 10px;}
.b3.b3 .stk{display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform .2s;}
.b3.b3 .stk:nth-child(odd){transform:rotate(-2deg);}
.b3.b3 .stk:nth-child(even){transform:rotate(1.6deg);}
.b3.b3 .stk:hover{transform:scale(1.08) rotate(0deg);}
.b3.b3 .stk.on{transform:scale(1.05) rotate(0deg);}
.b3.b3 .stk.on .stk-name{background:var(--ink);color:#fff;}
.b3.b3 .stk-ic{color:var(--ink);}
.b3.b3 .stk-ic svg{height:46px;width:auto;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(1px 3px 3px rgba(0,0,0,0.2));}
.b3.b3 .stk-name{font-family:var(--serif);font-size:12.5px;font-style:italic;color:var(--ink);margin-top:5px;background:#fff;padding:1px 9px;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,0.12);transition:all .15s;}
.b3.b3 .stk-sub{font-family:var(--mono);font-size:6.5px;color:var(--ink2);letter-spacing:.06em;margin-top:3px;}
.b3.b3 .pinboard{background:repeating-linear-gradient(0deg,transparent,transparent 26px,rgba(27,27,27,0.025) 26px,rgba(27,27,27,0.025) 27px),var(--b3board);padding:20px 14px 18px;border-radius:4px;margin:0 -4px;}
.b3.b3 .opt.pinopt{position:relative;box-shadow:1px 5px 12px rgba(0,0,0,0.15);border:none;background:#fff;border-radius:2px;padding:20px 12px 14px;text-align:center;transition:all .18s;}
.b3.b3 .opt.pinopt::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:9px;height:9px;background:var(--red);border-radius:50%;box-shadow:0 2px 3px rgba(0,0,0,0.3);}
.b3.b3 .opt.pinopt:nth-child(odd){transform:rotate(-1.4deg);}
.b3.b3 .opt.pinopt:nth-child(even){transform:rotate(1.2deg);}
.b3.b3 .opt.pinopt:hover{transform:rotate(0deg) translateY(-4px);background:var(--b3blue);}
.b3.b3 .opt.pinopt.on{transform:rotate(0deg);background:var(--b3blue);}
.b3.b3 .opt.pinopt .pc-ic{justify-content:center;}
.b3.b3 .pin-sk{display:flex;justify-content:center;color:var(--ink);margin-bottom:3px;}
.b3.b3 .pin-sk svg{height:48px;width:auto;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff);}
.b3.b3 .opt.yellow:hover,.b3.b3 .opt.yellow.on{background:var(--butter);border-color:var(--b3yel2);}
.b3.b3 .pillrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;padding-top:10px;border-top:1px solid var(--b);}
.b3.b3 .pillw{font-family:var(--serif);font-size:13px;letter-spacing:0.05em;padding:6px 13px;border:1px solid var(--bm);background:#fff;cursor:pointer;transition:all .14s;color:var(--ink2);}
.b3.b3 .pillw:hover{border-color:var(--ink);color:var(--ink);}
.b3.b3 .pillw.on{background:var(--ink);border-color:var(--ink);color:#fff;}
.b3.b3 .subq{display:none;}
.b3.b3 .subq.show{display:block;}
.b3.b3 .fnote{font-family:var(--mono);font-size:7.5px;letter-spacing:0.08em;color:var(--mute);margin-top:8px;}
.b3.b3 .tl-icon{height:30px;margin-bottom:9px;color:var(--ink);}
.b3.b3 .tl-icon svg{height:30px;width:auto;display:block;}
.b3.b3 .tl-icon.red{color:var(--red);}
.b3.b3 .more-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px;}
.b3.b3 .more-tile{display:flex;gap:10px;align-items:center;background:var(--b3cream);border:1px solid var(--b);border-radius:12px;overflow:hidden;cursor:pointer;transition:all .15s;padding-right:10px;}
.b3.b3 .more-tile:hover{background:var(--b3blue);border-color:var(--b3blue2);}
.b3.b3 .more-tile img{width:62px;height:62px;object-fit:cover;flex-shrink:0;}
.b3.b3 .more-tile-cap{font-family:var(--serif);font-size:12.5px;font-style:italic;color:var(--ink);line-height:1.2;}
.b3.b3 .more-tile-cta{font-family:var(--mono);font-size:7px;letter-spacing:0.1em;color:var(--ink2);text-transform:uppercase;margin-top:3px;}
.b3.b3 .intro-title{font-family:var(--serif);font-size:clamp(34px,6.5vw,46px);line-height:1.02;color:var(--ink);margin-bottom:10px;}
.b3.b3 .intro-title em{font-style:italic;}
.b3.b3 .intro-sub{font-size:14px;color:var(--ink2);line-height:1.65;margin-bottom:6px;}
.b3.b3 .calcwrap{display:flex;justify-content:center;margin:12px 0 0;}
.b3.b3 .calc3d{width:min(235px,72%);background:#F7EFC9;border-radius:18px;padding:13px 13px 15px;box-shadow:0 14px 28px rgba(0,0,0,0.16),inset 0 -4px 8px rgba(0,0,0,0.06),inset 0 2px 3px #fff;cursor:pointer;animation:b3calcfloat 3.6s ease-in-out infinite;}
@keyframes b3calcfloat{0%,100%{transform:rotate(-2.5deg) translateY(0);}50%{transform:rotate(-1deg) translateY(-7px);}}
.b3.b3 .calc-screen{background:#AEB39B;border-radius:6px;padding:10px;font-family:var(--mono);font-size:10.5px;line-height:1.5;color:#2E2C26;box-shadow:inset 0 2px 5px rgba(0,0,0,0.25);margin-bottom:12px;}
.b3.b3 .calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:center;}
.b3.b3 .ckey{aspect-ratio:1;border-radius:50%;background:#FBF4D6;box-shadow:0 3px 0 #D9CFA3,0 4px 6px rgba(0,0,0,0.12),inset 0 2px 2px #fff;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:#B5A878;user-select:none;}
.b3.b3 .ckey.wide{grid-column:span 3;aspect-ratio:auto;height:40px;border-radius:22px;font-family:var(--sans);font-size:14px;color:#A89A69;}
.b3.b3 .calc3d:active .ckey.wide{transform:translateY(2px);box-shadow:0 1px 0 #D9CFA3,0 2px 3px rgba(0,0,0,0.12);}
.b3.b3 .intro-start{display:flex;flex-direction:column;align-items:center;cursor:pointer;margin-top:12px;color:var(--ink);}
.b3.b3 .intro-start svg{height:30px;transform:rotate(180deg);}
.b3.b3 .intro-startnote{font-family:var(--hand);font-size:23px;transform:rotate(-2deg);}
.b3.b3 .fbtn{font-family:var(--serif);font-size:14px;letter-spacing:0.02em;font-style:italic;background:var(--ink);color:#fff;border:none;padding:13px 24px;cursor:pointer;transition:opacity .15s;display:inline-flex;align-items:center;gap:8px;width:100%;justify-content:center;margin-top:16px;}
.b3.b3 .fbtn:hover{opacity:.78;}
.b3.b3 .fbtn[disabled]{opacity:.35;cursor:default;}
.b3.b3 .field-label{font-family:var(--mono);font-size:8px;letter-spacing:0.16em;color:var(--mute);text-transform:uppercase;margin-bottom:6px;display:block;}
.b3.b3 .field-input{width:100%;border:none;border-bottom:1.5px solid var(--bm);background:transparent;outline:none;font-family:var(--sans);font-size:16px;color:var(--ink);padding:6px 0;transition:border-color .15s;}
.b3.b3 .field-input:focus{border-bottom-color:var(--ink);}
.b3.b3 .field-input::placeholder{color:var(--b3ghost);font-style:italic;font-size:14px;}
.b3.b3 .field-textarea{width:100%;border:1px solid var(--bm);background:var(--b3cream);outline:none;resize:none;font-family:var(--sans);font-size:14px;color:var(--ink);padding:12px;line-height:1.6;min-height:76px;transition:border-color .15s;border-radius:2px;}
.b3.b3 .field-textarea:focus{border-color:var(--ink);}
.b3.b3 .field-textarea::placeholder{color:var(--b3ghost);font-style:italic;}
.b3.b3 .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.b3.b3 .fcard.done{opacity:0.92;}
.b3.b3 .fcard.done .fq-title{font-size:20px;}
.b3.b3 .pg-legend{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.b3.b3 .pg-leg{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:8px;letter-spacing:0.08em;color:var(--ink2);}
.b3.b3 .pg-leg b{font-size:13px;}
.b3.b3 .pgrid{column-count:2;column-gap:12px;}
@media(min-width:861px){.b3.b3 .pgrid{column-count:2;}}
.b3.b3 .ptile{break-inside:avoid;margin-bottom:12px;position:relative;background:#fff;border:none;border-radius:16px;overflow:hidden;cursor:pointer;transition:box-shadow .22s,transform .22s;box-shadow:0 3px 14px rgba(27,27,27,0.09);}
.b3.b3 .ptile:hover{box-shadow:0 10px 26px rgba(27,27,27,0.16);transform:translateY(-3px);}
.b3.b3 .ptile img{width:100%;display:block;}
.b3.b3 .ptile-caprow{display:flex;align-items:center;gap:4px;padding:7px 10px 0;}
.b3.b3 .ptile-cap{font-family:var(--serif);font-size:11.5px;font-style:italic;color:var(--ink2);line-height:1.25;flex:1;}
.b3.b3 .pt-exp{flex-shrink:0;width:22px;height:22px;border:none;background:var(--b3cream);border-radius:50%;cursor:pointer;color:var(--ink2);font-size:11px;line-height:1;transition:transform .2s,color .15s;}
.b3.b3 .pt-exp:hover{color:var(--ink);}
.b3.b3 .pt-exp.open{transform:rotate(180deg);}
.b3.b3 .ptile-desc{display:none;font-size:11px;color:var(--ink2);line-height:1.55;padding:5px 11px 2px;}
.b3.b3 .ptile-desc.show{display:block;}
.b3.b3 .ptile-actions{display:flex;gap:6px;padding:5px 8px 9px;}
.b3.b3 .pt-act{flex:0 0 auto;font-size:14px;line-height:1;background:var(--b3cream);border:1px solid var(--b);border-radius:20px;padding:5px 10px;cursor:pointer;transition:all .14s;filter:grayscale(1) opacity(.55);}
.b3.b3 .pt-act:hover{filter:none;border-color:var(--bm);}
.b3.b3 .pt-act.on{filter:none;background:var(--butter);border-color:var(--b3yel2);}
.b3.b3 .pt-act.chk{filter:none;color:var(--mute);font-weight:700;font-family:var(--sans);}
.b3.b3 .pt-act.chk:hover{color:var(--ink);}
.b3.b3 .pt-act.chk.on{background:var(--b3blue);border-color:var(--b3blue2);color:var(--ink);}
.b3.b3 .ptile-badge{position:absolute;top:7px;right:7px;background:rgba(255,255,255,0.94);border-radius:20px;padding:3px 8px;font-size:11px;box-shadow:0 1px 4px rgba(0,0,0,0.15);display:none;}
.b3.b3 .ptile-badge.show{display:block;}
.b3.b3 .ptile-note-dot{position:absolute;top:7px;left:7px;background:var(--butter);border-radius:20px;padding:3px 7px;font-size:9px;box-shadow:0 1px 4px rgba(0,0,0,0.15);display:none;font-family:var(--mono);letter-spacing:0.04em;}
.b3.b3 .ptile-note-dot.show{display:block;}
.b3.b3 .ptile-add{break-inside:avoid;margin-bottom:10px;border:1.5px dashed var(--b3ghost);border-radius:2px;min-height:110px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;color:var(--mute);background:var(--b3cream);transition:all .15s;}
.b3.b3 .ptile-add:hover{border-color:var(--ink);color:var(--ink);}
.b3.b3 .ptile-add-plus{font-family:var(--serif);font-size:26px;line-height:1;}
.b3.b3 .ptile-add-txt{font-family:var(--mono);font-size:7.5px;letter-spacing:0.14em;text-transform:uppercase;}
.b3.b3 .overlay{position:fixed;inset:0;background:rgba(27,27,27,0.72);z-index:10001;display:none;align-items:center;justify-content:center;padding:16px;}
.b3.b3 .overlay.show{display:flex;}
.b3.b3 .pv{background:#fff;width:420px;max-width:96vw;max-height:92vh;overflow-y:auto;animation:b3paper-in .4s cubic-bezier(.4,0,.2,1) forwards;position:relative;}
@keyframes b3paper-in{from{transform:translateY(-30px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.b3.b3 .pv-x{position:absolute;top:10px;right:12px;z-index:3;background:rgba(255,255,255,0.9);border:none;border-radius:20px;width:28px;height:28px;cursor:pointer;font-size:13px;color:var(--ink2);box-shadow:0 1px 4px rgba(0,0,0,0.2);}
.b3.b3 .pv img{width:100%;max-height:46vh;object-fit:contain;display:block;background:var(--paper2);}
.b3.b3 .pv-body{padding:16px 18px 20px;}
.b3.b3 .pv-cap{font-family:var(--serif);font-size:17px;font-style:italic;color:var(--ink);margin-bottom:12px;line-height:1.2;}
.b3.b3 .pv-desc{font-size:12px;color:var(--ink2);line-height:1.6;margin:-6px 0 12px;display:none;}
.b3.b3 .pv-levels{display:flex;gap:6px;margin-bottom:12px;}
.b3.b3 .pv-level{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:10px 5px;border:1px solid var(--b);background:var(--b3cream);cursor:pointer;transition:all .14s;font-family:var(--serif);font-size:12px;color:var(--ink);white-space:nowrap;}
.b3.b3 .pv-level span{font-size:16px;filter:grayscale(1) opacity(.5);}
.b3.b3 .pv-level:hover{border-color:var(--bm);}
.b3.b3 .pv-level.on{background:var(--butter);border-color:var(--b3yel2);}
.b3.b3 .pv-level.on span{filter:none;}
.b3.b3 .pv-save{font-family:var(--serif);font-size:14px;font-style:italic;background:var(--ink);color:#fff;border:none;padding:12px 20px;cursor:pointer;width:100%;margin-top:12px;transition:opacity .15s;display:flex;align-items:center;justify-content:center;gap:8px;}
.b3.b3 .pv-save:hover{opacity:.8;}
.b3.b3 .pv-remove{font-family:var(--mono);font-size:8px;letter-spacing:0.12em;color:var(--red);background:none;border:none;cursor:pointer;margin:10px auto 0;display:none;text-transform:uppercase;}
.b3.b3 .pv-remove.show{display:block;}
.b3.b3 .ap{background:#fff;width:380px;max-width:96vw;padding:26px 24px;animation:b3paper-in .4s ease forwards;}
.b3.b3 .ap-title{font-family:var(--serif);font-size:22px;color:var(--ink);margin-bottom:4px;}
.b3.b3 .ap-sub{font-size:12px;color:var(--mute);font-style:italic;margin-bottom:16px;}
.b3.b3 .ap-topics{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 14px;}
.b3.b3 .ap-status{font-family:var(--mono);font-size:8px;letter-spacing:0.1em;color:var(--ink2);margin-top:10px;min-height:14px;}
/* h66: receipt = her claude-orderboard.html print-off exactly (paper-in drop + fade, flat white paper, dark printer bar + slot). No edge/feed/shadow extras — she has none. */
.b3.b3 .receipt-paper{background:#fff;width:340px;max-width:94vw;max-height:92vh;overflow-y:auto;animation:b3receipt-in .45s cubic-bezier(.4,0,.2,1) forwards;border:0;border-radius:0;box-shadow:none;}
@keyframes b3receipt-in{from{transform:translateY(-30px);opacity:0}to{transform:translateY(0);opacity:1}}
.b3.b3 .receipt-printer{height:28px;background:#2A2825;display:flex;align-items:center;justify-content:center;}
.b3.b3 .receipt-slot{width:70px;height:3px;background:#1A1614;border-radius:1px;}
.b3.b3 .receipt-body{background:#fff;padding:16px 14px 20px;}
.b3.b3 .receipt-hdr{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:8px;letter-spacing:0.2em;color:#A8A5A0;text-align:center;margin-bottom:12px;}
.b3.b3 .receipt-brand{font-family:'DM Serif Display',Georgia,serif;font-size:26px;letter-spacing:0.02em;color:#111110;text-align:center;line-height:1;margin-bottom:2px;}
.b3.b3 .receipt-loc{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:8px;letter-spacing:0.12em;color:#A8A5A0;text-align:center;margin-bottom:16px;}
.b3.b3 .r-div{border:none;border-top:1px dashed #D4D1CC;margin:12px 0;}
.b3.b3 .r-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;gap:10px;}
.b3.b3 .r-k{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:8px;letter-spacing:0.1em;color:#A8A5A0;text-transform:uppercase;flex-shrink:0;}
.b3.b3 .r-v{font-family:'DM Serif Display',Georgia,serif;font-size:14px;letter-spacing:0;color:#111110;text-align:right;line-height:1.25;}
.b3.b3 .r-total{margin-top:14px;padding:12px 14px;background:#F8EFA0;display:flex;justify-content:space-between;align-items:baseline;}
.b3.b3 .r-t-k{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:8px;letter-spacing:0.16em;color:#585552;}
.b3.b3 .r-t-v{font-family:'DM Serif Display',Georgia,serif;font-size:26px;letter-spacing:0;color:#111110;}
.b3.b3 .receipt-actions{display:flex;gap:8px;margin-top:14px;}
.b3.b3 .r-btn-back{flex:1;font-family:'DM Serif Display',Georgia,serif;font-size:13px;font-style:italic;background:none;color:#585552;border:1px solid rgba(17,17,16,.14);padding:11px 10px;cursor:pointer;transition:background .15s;border-radius:0;}
.b3.b3 .r-btn-back:hover{background:#F2F0EC;}
.b3.b3 .r-btn-send{flex:2;font-family:'DM Serif Display',Georgia,serif;font-size:13px;font-style:italic;background:#111110;color:#fff;border:none;padding:11px 10px;cursor:pointer;transition:opacity .15s;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:0;}
.b3.b3 .r-btn-send:hover{opacity:.78;}
.b3.b3 .contact-modal{background:#fff;width:360px;max-width:94vw;padding:30px 28px;animation:b3paper-in .3s ease forwards;}
.b3.b3 .c-title{font-family:var(--serif);font-size:24px;letter-spacing:-0.01em;color:var(--ink);margin-bottom:5px;line-height:1.1;}
.b3.b3 .c-sub{font-size:13px;color:var(--mute);font-style:italic;margin-bottom:20px;}
.b3.b3 .c-methods{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
.b3.b3 .c-method{display:flex;align-items:center;gap:12px;padding:12px 15px;border:1px solid var(--b);background:var(--b3cream);cursor:pointer;transition:all .15s;}
.b3.b3 .c-method:hover{background:var(--b3blue);border-color:var(--b3blue2);}
.b3.b3 .c-method.on{background:var(--b3blue);border-color:var(--b3blue2);}
.b3.b3 .c-method.on .c-check{background:var(--denim);border-color:var(--denim);}
.b3.b3 .c-method.on .c-check::after{opacity:1;}
.b3.b3 .c-check{width:14px;height:14px;border:1px solid var(--b3ghost);background:#fff;flex-shrink:0;position:relative;border-radius:2px;transition:all .13s;}
.b3.b3 .c-check::after{content:'';position:absolute;top:1px;left:4px;width:4px;height:7px;border:1.5px solid white;border-top:none;border-left:none;transform:rotate(45deg);opacity:0;transition:opacity .13s;}
.b3.b3 .c-name{font-family:var(--serif);font-size:16px;color:var(--ink);}
.b3.b3 .c-detail{display:none;padding:8px 0 4px;}
.b3.b3 .c-detail.show{display:block;}
.b3.b3 .c-error{font-family:var(--mono);font-size:8px;letter-spacing:0.12em;color:var(--red);margin-bottom:10px;display:none;}
.b3.b3 .c-error.show{display:block;}
.b3.b3 .c-sent{text-align:center;padding:14px 0 4px;display:none;}
.b3.b3 .c-sent.show{display:block;}
.b3.b3 .c-sent-big{font-family:var(--serif);font-size:26px;font-style:italic;color:var(--ink);margin-bottom:8px;}
.b3.b3 .c-sent-sub{font-size:13px;color:var(--ink2);line-height:1.6;font-style:italic;}/* --- our layout on top of Jordi's components: page scroll, real nav always on top, board sits below the nav --- */
.b3{--b3nav:63px;--w:#fff;--b3cream:#f8f6f2;--b3board:#efece6;--b3ghost:#cfcac2;--b3blue:var(--denim-soft);--b3blue2:#b3c5dd;--b3yel2:#e3cf62;--b:rgba(27,27,27,0.08);--bm:rgba(27,27,27,0.14);background:var(--paper);color:var(--ink);font-family:var(--sans)}
.b3 :where(button){font:inherit;color:inherit;background:none;border:0;text-align:inherit;cursor:pointer}
.b3.b3 .shell{height:auto;min-height:calc(100vh - var(--b3nav));align-items:start}
.b3.b3 .ql{overflow:visible;height:auto}
.b3.b3 .qr{position:sticky;top:var(--b3nav);height:calc(100vh - var(--b3nav));z-index:5}
.b3.b3 .fcard{opacity:1;transform:none;scroll-margin-top:calc(var(--b3nav) + 14px)}
.b3.b3 .fcard.new{animation:b3cardin .35s ease both}
@keyframes b3cardin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.b3.b3 .opt,.b3.b3 .stk,.b3.b3 .pillw,.b3.b3 .htitem,.b3.b3 .c-method,.b3.b3 .more-tile{-webkit-tap-highlight-color:transparent}
.b3.b3 .opt{display:block;width:100%}
.b3.b3 .stk{width:100%}
.b3.b3 .c-method{width:100%}
.b3.b3 .more-tile{text-align:left;width:100%}
.b3.b3 .fbtn{border-radius:0}
.b3 a.fbtn{text-decoration:none}
.b3.b3 .pin-v{text-shadow:-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff,-3px 0 0 #fff,3px 0 0 #fff,0 -3px 0 #fff,0 3px 0 #fff}
.b3.b3 .ptile img{background:var(--paper2)}
.b3.b3 .pt-act{line-height:1}
/* intro: our calculator image replaces the code-built one; a V chevron bobs under it */
.b3.b3 .b3-calc{display:block;width:min(250px,74%);margin:0 auto;padding:0;animation:b3calcfloat 3.6s ease-in-out infinite}
.b3.b3 .b3-calc img{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 18px rgba(0,0,0,.2));-webkit-user-drag:none;user-select:none}
.b3.b3 .b3-chev{display:flex;justify-content:center;margin:10px auto 0;width:44px;height:30px;color:var(--ink);animation:b3bob 1.8s ease-in-out infinite}
.b3.b3 .b3-chev svg{width:28px;height:16px}
@keyframes b3bob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(7px);opacity:1}}
/* signed-in "who is it for?" picker + extras that her file doesn't have, in her parts */
.b3.b3 .b3-forwho{margin-bottom:16px}
.b3.b3 .b3-forwho .pillrow{margin-top:0;padding-top:0;border-top:0}
.b3.b3 .b3-forwho .fnote{margin-top:6px}
.b3.b3 .b3-agree{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;color:var(--ink2);line-height:1.5;margin:4px 0 12px}
.b3.b3 .b3-agree input{margin-top:3px;accent-color:var(--ink)}
.b3.b3 .c-error:not(:empty){display:block}
.b3.b3 .b3-code{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.08em;background:var(--butter);padding:1px 6px}
.b3.b3 .b3-pillrow2{margin:4px 0 14px;padding-top:0;border-top:0}
/* overlays open below the site nav so the nav never gets covered */
.b3.b3 .overlay{top:var(--b3nav);z-index:38}
.b3.b3 .overlay#b2-receipt,.b3.b3 #b2-receipt.overlay{top:0;inset:0;z-index:10001;padding:16px;background:rgba(17,17,16,0.72)} /* h65: receipt overlays like her print-off, not a nav-boxed panel */
.b3.b3 .pv{max-height:calc(100vh - var(--b3nav) - 32px)}
.b3.b3 .contact-modal{max-height:calc(100vh - var(--b3nav) - 32px);overflow-y:auto}
/* mobile: her board takes the top 46% of the screen, directly under the nav */
@media(max-width:860px){
  .b3.b3 .qr{top:var(--b3nav);height:calc((100vh - var(--b3nav))*0.46)}
  .b3.b3 .fcard{scroll-margin-top:calc(var(--b3nav) + (100vh - var(--b3nav))*0.46 + 12px)}
}
/* desktop "mimic mobile": one centred column with the board on top, same as the phone */
@media(min-width:861px){
  .b3.b3.b3-col .shell{display:block;max-width:560px;margin:0 auto;border-left:1px solid var(--b);border-right:1px solid var(--b)}
  .b3.b3.b3-col .qr{height:calc((100vh - var(--b3nav))*0.46);border-left:0;border-bottom:1.5px solid var(--bm);box-shadow:0 10px 28px rgba(0,0,0,0.09)}
  .b3.b3.b3-col .fcard{scroll-margin-top:calc(var(--b3nav) + (100vh - var(--b3nav))*0.46 + 12px)}
}
@media (prefers-reduced-motion:reduce){.b3.b3 .b3-calc,.b3.b3 .b3-chev,.b3.b3 .qr-dot,.b3.b3 .fcard.new{animation:none}}
body.bld-page .fab{display:none}
.b3.b3 .spin.b3cut img{filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(1px 4px 7px rgba(0,0,0,0.25))}
.b3.b3 .htitem{color:var(--ink)}
.b3.b3 .pv-level{font-family:var(--serif)}
/* neutralise older site rules that share her class names (.opt, .pin, .pinboard, .stk, .pv) */
.b3.b3.b3 .opt{min-height:0}
.b3.b3.b3 .opt::before{content:none;display:none}
.b3.b3.b3 .pin{margin:0;animation:none}
.b3.b3.b3 .pin::before{margin:0}
.b3.b3.b3 .pinboard{position:static;top:auto;z-index:auto;border:0;box-shadow:none}
.b3.b3.b3 .stk{flex-wrap:nowrap;gap:0}
.b3.b3.b3 .pv{display:block;gap:0;padding:0}
.b3.b3.b3 .pv-cap{position:static;background:none;border-radius:0;padding:0}
/* real photos are taller than her placeholders: keep stickers inside her board spacing */
.b3.b3.b3 .spin img{width:auto;max-width:100%;max-height:118px;margin:0 auto;object-fit:contain}
.b3.b3.b3 .spin.edit img{max-height:150px}
.b3.b3.b3 .spin.raw img{max-height:110px}
/* live board v4: open manila folder (real photo, 9-slice so it grows with the pins) + "Let's edit this!" Polaroid (real photo frame) */
/* ===== The Off-Season (hidden section) ===== */
.navoff .off-hid{font:400 8px var(--mono);letter-spacing:.12em;color:var(--mute);text-transform:none}
.dd-off{transform:translateX(-40%)}
.dd-off .dd-in{width:auto;min-width:240px;padding:18px 24px 20px}
.dd-off .dd-side{display:flex;flex-direction:column;gap:2px}
.dd-soon{display:flex;flex-direction:column;margin-top:10px;padding-top:12px;border-top:1px dashed var(--line)}
.dd-soon em{font:italic 500 19px/1.1 var(--serif);color:var(--ink2)}
.dd-soon small{font-size:17px;color:var(--mute);line-height:1.1}
.off{padding-bottom:70px}
.off-note{margin:16px 0 0;color:var(--mute);font-size:9.5px}
.off-lede{max-width:560px;color:var(--ink2);font-size:16px}
.off-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:10px}
.off-tile{display:flex;flex-direction:column;gap:8px;min-height:230px;padding:26px 24px;background:#fff;border:1px solid var(--line);border-radius:4px;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
a.off-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.off-tile .mono{font-size:9px;color:var(--mute)}
.off-tile b{font:800 38px/1 var(--serif);letter-spacing:-.01em;margin-top:auto}
.off-tile .off-bl{color:var(--ink2);font-size:14px}
.off-tile .txtlink{font:700 10px var(--mono);letter-spacing:.18em;text-transform:uppercase}
.off-soon{background:var(--butter);border-color:transparent;justify-content:center;text-align:center;align-items:center}
.off-soon b{font:italic 500 46px/1 var(--serif);margin-top:6px}
.off-soon .hand{font-size:24px;line-height:1.1;color:var(--ink2)}
.off-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:64px 20px 70px;margin-top:10px;background:#fff;border:1px dashed var(--line);border-radius:4px}
.off-empty .mono{font-size:9.5px;color:var(--mute)}
.off-empty b{font:italic 500 clamp(44px,8vw,76px)/1 var(--serif)}
.off-empty .hand{font-size:26px;color:var(--ink2);margin:0 0 10px}
/* ===== admin phone view ===== */
.phonebtn{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:61;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:30px;padding:9px 14px 9px 11px;box-shadow:0 8px 20px rgba(0,0,0,.14);font:700 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.phonebtn svg{width:20px;height:20px}
body.phv-on{overflow:hidden}
.phv{position:fixed;inset:0;z-index:200;background:#d9d6d1;display:flex;flex-direction:column}
.phv-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:rgba(255,255,255,.6);border-bottom:1px solid rgba(0,0,0,.08)}
.phv-bar .mono{font-size:10px;color:var(--ink2)}
.phv-bar .btn{padding:11px 16px}
.phv-stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.phv-phone{width:414px;height:868px;flex:none;padding:12px;border-radius:46px;background:#1b1b1b;box-shadow:0 30px 60px rgba(0,0,0,.25);transform:scale(var(--phs,1));transform-origin:center}
.phv-phone iframe{display:block;width:390px;height:844px;border:0;border-radius:34px;background:#fff}
@media (max-width:620px){.phonebtn span{display:none}.phonebtn{padding:10px}}
/* header: back chevron (replaces the → before the brand); mobile order: ‹  ☰  brand ··· locker */
.hdr .backbtn{border:0;background:none;padding:0;width:34px;height:40px;display:grid;place-items:center;color:var(--ink);cursor:pointer;flex:none;margin-left:-8px;margin-right:-10px}
.hdr .backbtn svg{width:22px;height:22px;display:block}
.hdr .backbtn:hover{opacity:.6}
.hdr .logo{margin-right:auto}
@media (max-width:900px){.hdr .wrap{justify-content:flex-start;gap:6px}.hdr .burger{margin:0 4px 0 0;width:36px}.hdr .backbtn{margin-right:0}.hdr .hdr-r{margin-left:auto}}
/* Kids Lab mobile: the hand note points UP at the "Welcome to the Kids Lab" title (same hand arrow as the hero "by Jordi", flipped) */
.klh-arrow-up{display:none}
@media (max-width:1000px){.klh-copy .kl-note{display:inline-block;padding-right:58px;margin-top:14px}.klh-arrow-up{display:block;position:absolute;right:4px;bottom:12px;width:44px;height:58px;color:#2d4f9e;transform:scaleY(-1) rotate(-8deg)}}
/* brand: BY JORDI stacked under DIRTY DENIM */
.hdr .logo{flex-direction:column;align-items:flex-start;gap:3px;line-height:1}
.hdr .logo .lg-1{display:block}
.hdr .logo i{display:block;font-size:.62em;letter-spacing:.24em;color:var(--mute)}
/* single "Shop" item with a dropdown: Shop by category (yellow) / Shop by art (blue) */
.nav .navshop1 > a.u-shop1{border-bottom-color:transparent}
.nav .navshop1 > a.u-shop1.on{border-bottom-color:var(--ink)}
.nav .dd-shop1{transform:translateX(-50%)}
.nav .dd-shop1 .dd-in{width:auto;padding:18px 26px 20px}
.nav .dd-shop1 .dd-side{display:flex;flex-direction:column;gap:14px;width:auto;min-width:170px;border-left:0;padding-left:0}
.nav .dd-shop1 .dd-side a{align-self:flex-start;color:var(--ink);padding:4px 0 5px;white-space:nowrap}
.nav .dd-shop1 .dd-side a.u-shop{border:0!important;border-bottom:2px solid var(--yellow)!important}
.nav .dd-shop1 .dd-side a.u-art{border:0!important;border-bottom:2px solid var(--blue)!important}
/* contact page: the speech-bubble message form, inline */
.contact-pg{padding-bottom:70px}
.contact-pg .contact-sub{font-size:22px;color:var(--ink2);margin-top:6px}
.contact-box{display:flex;justify-content:center;margin-top:10px}
.modal.mail.mail-inline{position:relative;inset:auto;left:auto;right:auto;bottom:auto;top:auto;transform:none;margin:0 auto;width:min(520px,100%);max-height:none;animation:none}
.mail-inline .mail-cancel{visibility:hidden}

/* envelope replacement: small die-cut manila folder sticker with the liked photos peeking out */
/* "Let's edit this!" Polaroid, sized like the pinned edit sticker it replaces */
.b3.b3.b3 .spin.b3-pola{width:142px;padding:0;background:none;border:0;box-shadow:none;filter:drop-shadow(1px 4px 7px rgba(0,0,0,.2))}
.b3.b3.b3 .b3-pola-box{position:relative}
.b3.b3.b3 .b3-pola-ph{position:absolute;overflow:hidden;background:#fff}
.b3.b3.b3 .b3-pola-ph img{width:100%;height:100%;max-height:none;object-fit:cover;display:block;transform:rotate(var(--tilt,0deg)) scale(1.1)}
.b3.b3.b3 .b3-pola-fr{position:relative;display:block;width:100%;height:auto;max-height:none;pointer-events:none}
.b3.b3.b3 .b3-pola-cap{position:absolute;left:6%;right:6%;bottom:3%;display:flex;align-items:center;justify-content:center;font:700 14px/1 var(--hand);color:var(--ink);transform:rotate(calc(var(--tilt,0deg) - .5deg));text-align:center;white-space:nowrap}/* mobile header: ‹ | ☰ |   DIRTY DENIM / BY JORDI (centred)   locker */
@media (max-width:900px){
  .hdr .wrap{position:relative}
  .hdr .backbtn{margin-left:-6px;margin-right:0;width:34px;border-right:1px solid var(--ink);height:22px}
  .hdr .burger{margin:0;width:44px;height:22px;border-right:1px solid var(--ink);display:flex;flex-direction:column;justify-content:center}
  .hdr .burger span{margin:2.5px auto}
  .hdr .logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);align-items:center;margin:0;text-align:center}
}
/* ===== desktop nav v4: brand left (display font) · links centred · client file + locker right ===== */
.hdr .hdr-l{display:flex;align-items:center;gap:0}
.hdr .logo .lg-m{display:none}
.hdr .logo .lg-d{font:italic 600 21px/1 var(--serif);letter-spacing:-.01em;text-transform:none;color:var(--ink);white-space:nowrap}
.hdr .logo{flex-direction:row}
@media (min-width:901px){
  .hdr .wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:24px}
  .hdr .hdr-l{justify-self:start}
  .hdr .nav{justify-self:center}
  .hdr .hdr-r{justify-self:end}
  .hdr .logo{margin:0}
}
.nav a.u-about{font:italic 600 18px/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink);border-bottom-color:transparent!important;padding-bottom:5px}
.nav a.u-about.on{border-bottom-color:var(--ink)!important}
@media (max-width:900px){
  .hdr .logo .lg-d{display:none}
  .hdr .logo .lg-m{display:flex;flex-direction:column;align-items:center;gap:2px}
  .hdr .logo .lg-1{font:italic 600 19px/1 var(--serif);letter-spacing:-.01em;text-transform:none}
  .hdr .logo i{font:italic 500 12px/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--mute)}
}
/* nav font options (SEED.navFont); brand + About keep the display font */
body.navf-rounded .nav a:not(.u-about),body.navf-rounded .hdr .filelink,body.navf-rounded .nav .dd-side a{font:600 15px/1.2 'Nunito',system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important}
body.navf-geo .nav a:not(.u-about),body.navf-geo .hdr .filelink,body.navf-geo .nav .dd-side a{font:500 15px/1.2 'DM Sans',system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important}
body.navf-serif .nav a:not(.u-about),body.navf-serif .hdr .filelink,body.navf-serif .nav .dd-side a{font:italic 500 16.5px/1.2 var(--serif)!important;letter-spacing:0!important;text-transform:none!important}
body[class*="navf-"] .nav{gap:26px}
body[class*="navf-"] .menu a{text-transform:none}

.b3.b3 .env.b3-fold.open{width:168px}
.b3.b3 .env.b3-fold.shut{width:112px}
.b3.b3 .b3-fold-art{position:relative}
.b3.b3 .b3-fold-img{position:relative;z-index:2;width:100%;display:block}
.b3.b3 .env.b3-fold::before{top:-2px;z-index:6}
/* open: liked stickers dropped inside, on the panels */
.b3.b3 .b3-in{position:absolute;z-index:3;width:30%;transform:rotate(var(--pr));animation:b3drop .45s cubic-bezier(.3,1.5,.5,1) both}
.b3.b3 .b3-in img{width:100%;height:auto;max-height:64px;object-fit:contain;display:block;filter:drop-shadow(0 0 0 #fff) drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 2px 3px rgba(0,0,0,.22))}
@keyframes b3drop{from{transform:translateY(-16px) rotate(var(--pr)) scale(1.15);opacity:0}to{transform:rotate(var(--pr));opacity:1}}
/* closed: live "your likes" on the cover, one photo out of the top, one out of the side (behind the cover) */
.b3.b3 .b3-fold-lbl{position:absolute;z-index:3;left:8%;right:12%;top:38%;text-align:center;font:700 23px/1 var(--hand);color:var(--ink);transform:rotate(-4deg)}
.b3.b3 .b3-fold-lbl small{display:block;font:700 15px/1.1 var(--hand);opacity:.7;margin-top:4px}
.b3.b3 .b3-fold.shut.seal .b3-fold-art{animation:b3shut .5s ease-out both}
@keyframes b3shut{from{transform:scale(.82) rotate(-6deg);opacity:.2}to{transform:none;opacity:1}}
/* Polaroid (mid frame): whole jacket visible, white fill */
.b3.b3.b3 .b3-pola.fit-contain .b3-pola-ph{background:#fff}
.b3.b3.b3 .b3-pola.fit-contain .b3-pola-ph img{object-fit:contain;transform:rotate(var(--tilt,0deg)) scale(.94)}/* ===== nav v5: full viewport width, brand far left, links centred in the viewport, file + locker far right ===== */
.hdr .logo .lg-m{display:flex;align-items:baseline;gap:8px}
.hdr .logo .lg-1{font:italic 600 21px/1 var(--serif);letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.hdr .logo i{font:700 19px/1 var(--hand);letter-spacing:0;text-transform:none;color:var(--ink2);font-style:normal}
@media (min-width:901px){
  .hdr .wrap{max-width:none;padding-left:32px;padding-right:32px;grid-template-columns:1fr auto 1fr}
  .hdr .backbtn{margin-left:-10px;margin-right:2px}
}
@media (max-width:900px){
  .hdr .logo .lg-m{flex-direction:column;align-items:center;gap:1px}
  .hdr .logo .lg-1{font-size:19px}
  .hdr .logo i{font:700 15px/1 var(--hand);color:var(--ink2)}
}
/* ===== order board desktop: one centred composition (questions 640 + board 440, gap 40) ===== */
@media(min-width:861px){
  .b3.b3:not(.b3-col) .shell{display:grid;grid-template-columns:minmax(0,640px) 440px;column-gap:40px;justify-content:center;max-width:1180px;margin:0 auto;padding:28px 32px 0;height:auto;min-height:calc(100vh - var(--b3nav));align-items:start;box-sizing:border-box}
  .b3.b3:not(.b3-col) .ql{overflow:visible;background:none;height:auto}
  .b3.b3:not(.b3-col) .ql-bar{display:none}
  .b3.b3:not(.b3-col) .feed{padding:0 0 30px;gap:20px;align-items:stretch;zoom:1.08}
  .b3.b3:not(.b3-col) .fcard{max-width:none;border-radius:14px}
  .b3.b3:not(.b3-col) .qr{position:sticky;top:calc(var(--b3nav) + 28px);height:calc(100vh - var(--b3nav) - 56px);min-height:460px;border:1px solid var(--b);border-radius:16px;overflow:hidden;box-shadow:0 14px 34px -18px rgba(0,0,0,.18);background:var(--b3cream)}
  .b3.b3:not(.b3-col) .qr-bar{padding:10px 20px;min-height:60px}
  .b3.b3:not(.b3-col) .qr-live-txt,.b3.b3:not(.b3-col) .qr-count{font-size:10px}
  .b3.b3:not(.b3-col) .qr-est-label{font-size:9px}
  .b3.b3:not(.b3-col) .qr-est-num{font-size:30px}
  .b3.b3:not(.b3-col) .qr-empty{padding:70px 24px 0}
  .b3.b3:not(.b3-col) .qr-empty-circle{width:56px;height:56px;font-size:28px;margin-bottom:14px}
  .b3.b3:not(.b3-col) .qr-empty-main{font-size:22px;color:var(--ink2);opacity:.6}
  .b3.b3:not(.b3-col) .qr-empty-sub{font-size:16px}
}
.b3.b3.b3 .spin.b3-pola img.b3-pola-fr{max-height:none;width:100%;height:auto;max-width:none;margin:0}
.b3.b3.b3 .spin.b3-pola .b3-pola-ph img{max-height:none;max-width:none;margin:0}

/* closed folder: the liked jackets stick out as die-cut sticker cutouts (same white edge as the board stickers) */
.b3.b3 .b3-out{position:absolute;z-index:1;width:62%}
.b3.b3 .b3-out img{width:100%;height:auto;max-height:90px;object-fit:contain;display:block;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(1px 3px 5px rgba(0,0,0,.22))}
.b3.b3 .b3-out.top{left:12%;top:-26%;transform:rotate(-8deg)}
.b3.b3 .b3-out.side{right:-40%;top:26%;transform:rotate(10deg)}
/* ===== Oct 18 evening round (Jordi's homepage + header notes) ===== */
/* handwritten font: Kalam (closest match to the hand in her coming-soon mock), self-hosted and size-matched to the old Caveat sizes */
@font-face{font-family:'DD Hand';src:url('/fonts/kalam-400.woff2') format('woff2');font-weight:100 500;font-display:swap;size-adjust:84%}
@font-face{font-family:'DD Hand';src:url('/fonts/kalam-700.woff2') format('woff2');font-weight:600 900;font-display:swap;size-adjust:84%}
:root{--hand:'DD Hand','Caveat',cursive}
/* brand: "Dirty" over "Denim" in the display font, "by Jordi" small directly under, in the hand font (desktop + mobile) */
.hdr .logo .lg-m{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.hdr .logo .lg-1{display:flex;flex-direction:column;font:italic 600 17px/.92 var(--serif);letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.hdr .logo i{font:400 12px/1 var(--hand);font-style:normal;letter-spacing:0;text-transform:none;color:var(--ink2);margin-top:1px}
@media (max-width:900px){
  .hdr .logo .lg-m{align-items:center}
  .hdr .logo .lg-1{align-items:center;font-size:17px}
  .hdr .wrap{padding-left:8px}
  .hdr .backbtn{margin-left:0;width:30px;border-right:1px solid #d6d6d6}
  .hdr .burger{border-right:1px solid #d6d6d6;width:44px;height:24px}
  .hdr .burger span{width:18px;height:1.5px;margin:2px auto;background:var(--ink)}
}
/* rack: "Something fun is coming soon." sits right above the red (unclickable) jacket, arrow pointing down at it */
.wr .wr-note.n-fun{left:47%;right:auto;top:2.2cqw;font-size:clamp(13px,3.2cqw,22px);line-height:1.1;text-align:center;color:#2a2926;transform:rotate(-3deg);white-space:nowrap;max-width:none}
.wr .wr-note.n-fun span{display:block}
.wr .wr-note.n-fun .n-fun-a{display:block;width:clamp(26px,7cqw,54px);margin:.2cqw 0 0 58%}
.jh-crop>.jh-fun.wr-note{font-size:clamp(12px,calc(var(--u) * .0145),24px);color:#2a2926;transform:rotate(-3deg);text-align:center}
.jh-fun .n-fun-a{display:block;width:calc(var(--u) * .03);margin:0 0 0 55%}
/* Kids Lab teaser: full-bleed image */
.klt{padding-top:0}
.klt-grid{grid-template-columns:1fr;max-width:none;padding-left:0;padding-right:0;gap:clamp(20px,3vw,36px)}
.klt-grid>div:last-child{padding:0 max(var(--pad),4vw)}
.klt-img{width:100%;border-radius:0;overflow:hidden}
.klt-img>img{width:100%;height:clamp(300px,52vw,720px);object-fit:cover;display:block;border-radius:0}
/* Meet the mascots: smaller badges in a scrollable row with arrow buttons (rotation on scroll kept) */
.pr-row{position:relative;display:flex;align-items:center;gap:6px;padding:0 6px}
.parade .pr-track{flex:1;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;height:auto!important;padding:6px 4px 10px}
.parade .pr-track::-webkit-scrollbar{display:none}
.parade .pr-track .masc{position:relative;top:auto;left:auto;flex:0 0 auto;width:clamp(58px,6.4vw,86px)!important;scroll-snap-align:start;transform:none!important}
.pr-arr{flex:none;width:34px;height:34px;border:1px solid #d6d6d6;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--ink);cursor:pointer;padding:0}
.pr-arr svg{width:18px;height:18px}
.pr-arr:hover{border-color:var(--ink)}
.parade.meeting .pr-arr{display:none}
/* the "I built this website from scratch" banner closes the page, under the footer */
.fbstrip.fb-foot{display:flex}
/* rink: her step text back on the scene, full bleed on phones (no side padding / rounded "pillow" frame) */
@media (max-width:760px){
  .rink-sec>.wrap{padding-left:0;padding-right:0}
  .rink-sec .rk-title{padding:0 var(--pad)}
  .rk-frame{border-radius:0;box-shadow:none;max-width:none}
  .rink-sec .rk-steps,.rink-sec .rk-go{padding-left:var(--pad);padding-right:var(--pad)}
}
/* desktop: sections use the full screen width (no skinny centred column on big monitors) */
@media (min-width:1100px){
  .wrap{max-width:none;padding-left:max(var(--pad),4vw);padding-right:max(var(--pad),4vw)}
  .rk-frame{max-width:min(1600px,100%)}
}
.wr .wr-note.n-po{left:7%}
.wr .wr-note.n-po svg{margin-left:20cqw}
.wr .wr-note.n-fun{left:57%;text-align:left}
.wr .wr-note.n-fun .n-fun-a{margin-left:4%;transform-origin:center}
.parade .pr-track{padding:16px 6px 22px;margin:-10px 0}
.parade .pr-track .masc{filter:none}
.parade .pr-track .masc .masc-in{box-shadow:0 4px 9px rgba(40,30,10,.16),inset 0 0 0 1px rgba(0,0,0,.05)}
/* Kids Lab trimmed to the 4 style squares: Mini & Me burst gets its own spot under the row (no longer sits on a square) */
@media (min-width:1001px){.klh-copy .kl-sq-wrap .mm-wrapb{position:static;margin-top:16px}}

/* ---- Shop restructure (Oct 18): "Filter by" sidebar, 2 hanging tags, centred Polaroids, collection city dropdown ---- */
.fs-h{font:600 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.fs-city{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;background:none;border:0;border-bottom:1px solid var(--line);padding:11px 2px;font:500 15px var(--sans);color:var(--ink);cursor:pointer;text-align:left}
.fs-city .chev-dn,.cdrop-b .chev-dn{transition:transform .2s;flex:none}
.fs-city.open .chev-dn,.cdrop-b.open .chev-dn{transform:rotate(180deg)}
.fs-cl{margin:0 0 6px 10px}
.fs-cl li button{font-size:14px;padding:8px 2px}
.fs-types{margin-top:18px}
.fs-types li a{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:11px 2px;font:400 15px var(--sans);color:#555;text-decoration:none}
.fs-types li a:hover{color:var(--ink)}
.fs-types li a.on{color:var(--ink);font-weight:600}
.fs-types li a.on:after{content:"●";font-size:8px;color:var(--blue);align-self:center}
.collsec .pols{justify-content:center}
.collsec .sec-head{justify-content:center}
.cdrop-w{position:relative;margin:18px 0 8px}
.cdrop-b{display:inline-flex;align-items:center;gap:10px;background:none;border:0;border-bottom:1.5px solid var(--ink);padding:6px 0;font:600 13px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.cdrop{position:absolute;left:0;top:100%;z-index:30;margin-top:6px;min-width:240px;max-height:320px;overflow:auto;background:#fff;border:1px solid #d6d6d6;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);padding:6px;list-style:none}
.cdrop li button{width:100%;text-align:left;background:none;border:0;border-radius:6px;padding:9px 10px;font:400 15px var(--sans);color:#333;cursor:pointer}
.cdrop li button:hover,.cdrop li button.on{background:#f1efe9;color:var(--ink)}
.cdrop-cur{display:block;margin-top:8px;font-size:11px;color:var(--mute)}
.cdrop-cur button{background:none;border:0;text-decoration:underline;cursor:pointer;font:inherit;color:inherit;padding:0}
.bmg-pol{position:relative;display:inline-block;margin:26px 0 22px 6px;background:#fff;padding:10px 10px 12px;box-shadow:0 6px 16px rgba(0,0,0,.12);transform:rotate(-3deg);width:min(190px,70%)}
.bmg-pol img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#f4f2ee}
.bmg-pol b{display:block;margin-top:8px;font:italic 600 16px var(--serif)}
.bmg-pol .clip{top:-12px;z-index:2}
/* Collections tag: bounce + stretch-wide attention, repeating every ~3.5s */
.ptab.blue span{animation:teaseW 3.5s cubic-bezier(.3,.7,.3,1) .8s infinite!important;transform-origin:50% 0}
.ptab.blue:hover span{animation-play-state:paused!important}
@keyframes teaseW{0%,62%,100%{translate:0 0;scale:1 1}68%{translate:0 -7px;scale:1.16 .9}75%{translate:0 0;scale:.96 1.06}81%{translate:0 -3px;scale:1.1 .95}88%{translate:0 0;scale:1 1}}
@media (prefers-reduced-motion:reduce){.ptab.blue span{animation:none!important}}
@media (max-width:760px){.bmg-side .coll-pol.bmg-pol{width:140px!important;max-width:140px!important;margin:18px 0 14px 8px}}

/* ---- Product page: up-close view (split front/back, no rod) + optional inside-texture thumb ---- */
.pv-close{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 0 4px}
.pv-close img{display:block;width:min(100%,560px);aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:6px}
.pv-cl-tog{display:inline-flex;border:1px solid #d6d6d6;border-radius:999px;padding:3px;background:#fff}
.pv-cl-tog button{border:0;background:none;border-radius:999px;padding:7px 18px;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#666;cursor:pointer}
.pv-cl-tog button.on{background:var(--ink);color:#fff}
.pv-th-in{position:relative}
.pv-in-note{position:absolute;left:100%;top:6px;margin-left:6px;white-space:nowrap;font:400 12px var(--mono);font-style:normal;color:#2d4f9e;display:flex;align-items:center;gap:4px;pointer-events:none}
/* ---- TRIAL Shop-all grid: stacked Polaroids ---- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:56px 40px;padding:24px 8px 40px}
.pst{position:relative;display:block;aspect-ratio:4/5;text-decoration:none;color:var(--ink)}
.pst-card{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;padding:10px 10px 0;box-shadow:0 6px 18px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);transition:transform .45s cubic-bezier(.3,.8,.3,1),z-index 0s .2s}
.pst-img{flex:1;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden}
.pst-img img{width:100%;height:100%;object-fit:contain}
.pst-soon{font-size:10px;color:#aaa;letter-spacing:.14em}
.pst-name{display:block;padding:12px 4px 14px;font:500 11.5px/1.35 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-align:center}
.pst-f{z-index:2;transform:rotate(-1.5deg)}
.pst-b{z-index:1;transform:translate(20px,-14px) rotate(5deg)}
.pst.two:hover .pst-f,.pst.two.flip .pst-f{z-index:1;transform:translate(-12px,8px) rotate(-5deg)}
.pst.two:hover .pst-b,.pst.two.flip .pst-b{z-index:2;transform:rotate(1.5deg)}
@media (max-width:760px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 22px;padding:16px 6px 30px}.pst-card{padding:7px 7px 0}.pst-name{font-size:9.5px;padding:9px 2px 10px}.pst-b{transform:translate(9px,-7px) rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.pst-card{transition:none}}

/* ---- Nav fonts picked by Jordi (Oct 18): SEED.navFont = 'picked' ---- */
body.navf-picked .hdr .logo .lg-1{display:flex;flex-direction:row;gap:.26em;font:600 21px/1 'Fredoka',system-ui,sans-serif;font-style:normal;letter-spacing:0;white-space:nowrap}
body.navf-picked .hdr .logo .lg-m{flex-direction:column;gap:2px}
body.navf-picked .nav a.u-about{font:500 15.5px/1.2 'Fredoka',system-ui,sans-serif!important;font-style:normal!important;letter-spacing:0!important;text-transform:none!important}
body.navf-picked .nav a:not(.u-about),body.navf-picked .hdr .filelink,body.navf-picked .nav .dd-side a,body.navf-picked .menu > a,body.navf-picked .menu a:not(.u-about),body.navf-picked .menu button{font:500 15.5px/1.2 Barlow,system-ui,sans-serif!important;font-style:normal!important;letter-spacing:0!important;text-transform:none!important}
@media (max-width:900px){body.navf-picked .hdr .logo .lg-1{font-size:19px}body.navf-picked .hdr .logo .lg-m{align-items:center}}
/* Oct 19 1:07 PM Jordi: "Why is by Jordi so small? Why is it not centered?" → desktop: 'by Jordi' centred under 'Dirty Denim' (Fredoka kept) and bigger, same hand font (font swap awaits her pick) */
@media (min-width:901px){.hdr .logo .lg-m,body.navf-picked .hdr .logo .lg-m{align-items:center}.hdr .logo i{text-align:center}}
/* Oct 19 1:16 PM Jordi (supersedes the Oct 18 Fredoka brand): "let's use the same font that the titles have, like the Rakell Baby 67… as long as Dirty Denim is one line
   and then By Jordi is under it, but I don't like the current By Jordi font." → brand in the heading font (Fraunces 800, like the product h1), one line;
   'by Jordi' centred under it in Fraunces italic (no DD Hand). */
body.navf-picked .hdr .logo .lg-1,.hdr .logo .lg-1{display:flex;flex-direction:row;gap:.24em;font:800 22px/1 Fraunces,Georgia,serif;font-style:normal;letter-spacing:-.02em;white-space:nowrap;text-transform:none;color:var(--ink)}
body.navf-picked .hdr .logo .lg-m,.hdr .logo .lg-m{align-items:center;gap:3px}
.hdr .logo i,body.navf-picked .hdr .logo i{font:italic 500 14.5px/1 Fraunces,Georgia,serif;letter-spacing:0;text-transform:none;color:var(--ink2);text-align:center;margin-top:0}
@media (max-width:900px){body.navf-picked .hdr .logo .lg-1,.hdr .logo .lg-1{font-size:20px}.hdr .logo i,body.navf-picked .hdr .logo i{font-size:13.5px}}

/* ===== Box round (Oct 18): /locker "Here's your box" ===== */
.bxsc{background:#f3ead9}
.bxsc-hd{padding:22px max(var(--pad),4vw) 8px;position:relative;z-index:3}
.bxsc-t{font:italic 600 clamp(30px,4vw,48px)/1.05 var(--serif);margin:4px 0 12px}
.bxsc-tabs{display:flex;flex-wrap:wrap;gap:8px}
.bxsc-tabs a{font:500 14px/1 Barlow,system-ui,sans-serif;padding:9px 14px;border:1px solid #d6d6d6;border-radius:999px;background:#fff;color:var(--ink);text-decoration:none}
.bxsc-tabs a.on{background:var(--ink);border-color:var(--ink);color:#fff}
.lk-tabs{margin-top:12px}
.bxsc-stage{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden}
.bxsc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bxsc-stk{position:absolute;left:var(--x);top:var(--y);width:var(--s);transform:translate(-50%,-50%) rotate(var(--r));z-index:2}
.bxsc-stk .stk2-b{display:block;width:100%;border:0;background:none;padding:0;cursor:pointer}
.bxsc-stk .stk2-b img{width:100%;display:block;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 6px rgba(40,30,10,.25))}
.bxsc-stk.on{z-index:4}
.bxsc-stk.on .stk2-b img{filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 0 0 #2d4f9e) drop-shadow(0 8px 14px rgba(40,30,10,.35))}
.stk-q{position:absolute;right:-6px;top:-6px;min-width:30px;height:30px;padding:0 7px;border-radius:999px;background:var(--ink);color:#fff;font:600 14px/30px Barlow,system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px #fff;transform:rotate(calc(-1 * var(--r)))}
.bxsc-pop{position:absolute;z-index:6;left:50%;bottom:4%;transform:translateX(-50%);width:min(340px,92%);background:#fff;border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.18);padding:16px 16px 14px}
.bxsc-pop .x{position:absolute;right:8px;top:6px;border:0;background:none;font-size:22px;cursor:pointer;color:#555;width:36px;height:36px}
.bxsc-pop-h{display:flex;gap:12px;align-items:center;padding-right:30px}
.bxsc-pop-h img{width:56px;height:56px;object-fit:contain;background:#f6f3ee;border-radius:8px}
.bxsc-pop-h h4{font:600 17px/1.2 var(--sans);margin:2px 0}
.bxsc-pop-h small{color:#666;font-size:13px}
.bxsc-pop-q{display:flex;align-items:center;justify-content:space-between;margin:14px 0 12px;padding:10px 0;border-top:1px solid #eee;border-bottom:1px solid #eee}
.bxsc-pop-a{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.qstep{display:inline-flex;align-items:center;border:1px solid #d6d6d6;border-radius:999px;background:#fff}
.qstep button{width:36px;height:36px;border:0;background:none;font:500 18px/1 var(--sans);cursor:pointer;color:var(--ink)}
.qstep b{min-width:24px;text-align:center;font:600 15px var(--sans)}
.bxsc-empty{position:absolute;left:50%;top:84%;transform:translateX(-50%);background:#fff;border-radius:999px;padding:10px 18px;white-space:nowrap;font-size:15px;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.closer{background:var(--paper,#f7f5f0);padding:36px max(var(--pad),4vw) 60px}
.closer-hd{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1.5px solid var(--ink);padding-bottom:10px}
.closer-hd h2{font:italic 600 30px/1.1 var(--serif);margin:0}
.cl-list{list-style:none;margin:0;padding:0}
.cl-row{display:grid;grid-template-columns:76px minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid #e3e0da}
.cl-th img{width:76px;height:76px;object-fit:contain;background:#fff;border-radius:8px;display:block}
.cl-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.cl-n{font:600 16px/1.25 var(--sans);color:var(--ink);text-decoration:none}
.cl-o{font-size:14px;color:#666}
.cl-rm{align-self:flex-start;margin-top:2px;font-size:13px}
.cl-p{font:600 15px var(--sans);min-width:92px;text-align:right}
.cl-tot{display:flex;justify-content:space-between;padding:14px 0;font-size:17px}
.closer .lk-acts{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-top:8px}
.pv-inbox{display:flex;flex-direction:column;gap:6px;background:#f1efe9;border-radius:10px;padding:12px 14px;margin:6px 0 14px}
.pv-inbox-t{font:600 16px var(--sans)}
.pv-inbox-a{display:flex;flex-wrap:wrap;gap:14px;font-size:14px}
.pv-copynote{color:#2d4f9e;font-size:12px;margin:0 0 6px}
@media (max-width:760px){
  .bxsc-hd{padding:16px 16px 6px}
  .bxsc-tabs a{font-size:13.5px;padding:9px 12px}
  .bxsc-stage{aspect-ratio:983/943}
  .bxsc-stk{left:var(--xm);top:var(--ym);width:var(--sm)}
  .stk-q{min-width:26px;height:26px;font-size:12.5px;line-height:26px}
  .bxsc-pop{bottom:3%}
  .closer{padding:26px 16px 50px}
  .cl-row{grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"th t p" "th t q";gap:6px 12px}
  .cl-th{grid-area:th}.cl-th img{width:64px;height:64px}.cl-t{grid-area:t}.cl-row .qstep{grid-area:q;justify-self:end}.cl-p{grid-area:p;min-width:0}
  .closer .lk-acts{justify-content:stretch}.closer .lk-acts>*{flex:1;justify-content:center}
}

/* ---- Rack notes, Jordi's reference (Oct 18): Akaya Telivigala, soft grey, arrows cut from her image ---- */
.wr-note.rn{font-family:'Akaya Telivigala',cursive!important;font-weight:400!important;color:#6b6b6b!important;text-align:center!important;line-height:1.12!important;letter-spacing:0!important;text-decoration:none}
.wr-note.rn span{display:block;white-space:nowrap}
.wr-note.rn .rn-rot{transform:rotate(10deg);transform-origin:50% 50%}
.wr-note.rn .rn-arr{position:absolute;height:auto;pointer-events:none;max-width:none}
.wr-note.rn svg{display:none}
.wr .wr-note.rn{position:absolute;font-size:3.7cqw!important;transform:none}
.wr .wr-note.rn-l{left:2%!important;right:auto!important;top:2.5cqw!important;transform:rotate(-2deg)!important}
.wr .wr-note.rn-l .rn-arr{left:calc(100% - 3cqw);top:58%;width:13cqw}
.wr .wr-note.rn-r{left:auto!important;right:3%!important;top:.5cqw!important;transform:none!important}
.wr .wr-note.rn-r .rn-arr{right:calc(100% - 4cqw);top:68%;width:12cqw}
.jh-note.rn{font-size:clamp(17px,1.5vw,24px)!important}
.jh-note.rn-l{transform:translate(-50%,0) rotate(-2deg)!important}
.jh-note.rn-l .rn-arr{left:calc(100% - 14px);top:55%;width:clamp(62px,5vw,86px)}
.jh-note.rn-r{transform:translate(-50%,0)!important}
.jh-note.rn-r .rn-arr{right:calc(100% - 18px);top:66%;width:clamp(56px,4.6vw,80px)}
.wr .wr-note.rn{font-size:3.4cqw!important}
.wr .wr-note.rn-l{left:10.5%!important}
.wr .wr-note.rn-l .rn-arr{width:12cqw;left:calc(100% - 2cqw)}
.wr .wr-note.rn-r{right:12%!important}
.wr .wr-note.rn-r .rn-arr{right:calc(100% - 1.5cqw);top:80%}
.closer .lk-acts{position:static!important;bottom:auto!important;box-shadow:none!important;background:none!important;padding:0!important}
a.kl-sq,a.kl-sq b,a.kl-sq small,a.kl-sq em{text-decoration:none;color:inherit}
/* box screen v2 (Oct 18): no white glow on stickers (crisp die-cut edge + faint shadow), underlined text tabs, square controls */
.bxsc-stk .stk2-b{filter:drop-shadow(0 1px 1.5px rgba(40,30,10,.14))!important}
.bxsc-stk .stk2-b img,.bxsc-stk.on .stk2-b img{filter:drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff)!important}
.bxsc-stk.on .stk2-b{filter:drop-shadow(0 3px 5px rgba(40,30,10,.2))!important}
.bxsc-tabs{gap:26px;flex-wrap:nowrap;align-items:baseline}
.bxsc-tabs a{background:none!important;border:0!important;border-radius:0!important;padding:4px 0 3px!important;color:#666!important;font:500 15px/1.2 Barlow,system-ui,sans-serif!important;border-bottom:1.5px solid transparent!important;white-space:nowrap}
.bxsc-tabs a:hover{color:var(--ink)!important;border-bottom-color:var(--ink)!important}
.bxsc-tabs a.on{color:var(--ink)!important;border-bottom-color:var(--ink)!important}
.bxsc .qstep,.lk-page .qstep{border-radius:0}
.bxsc-pop{border-radius:2px}
.bxsc-empty{border-radius:0}
@media (max-width:760px){.bxsc-tabs{gap:18px}.bxsc-tabs a{font-size:14px!important}}
@media (max-width:360px){.bxsc-tabs{flex-wrap:wrap;gap:8px 16px}}
.bxsc-pop .x{border-radius:0!important}
.mm-note .hand{white-space:pre-line}
.mm-note .hand{line-height:1.12}

/* ===== static in-place add-to-box (product page, Oct 18 mocks A/B/C) ===== */
.atb-hang{display:flex;justify-content:center;margin-top:-2.2%;padding:0}
.atb-hang img{display:block;height:auto;transform-origin:50% 0;animation:sway 8s ease-in-out infinite}
.atb-hang-a img{width:36%;margin-left:-4%}
.atb-hang-b img{width:42%;margin-top:-1.2%}
.atb{position:relative;margin:26px 0 8px}
.atb-box{position:relative;width:min(440px,100%);margin:0 0 0 -6%;transform:rotate(-5deg);transform-origin:50% 60%}
.atb-boximg{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(60,45,10,.18))}
.atb-stk{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:translate(-50%,-50%) rotate(calc(var(--r) + 5deg));animation:atbIn .45s cubic-bezier(.3,1.4,.5,1) both}
.atb-stk:not(.new){animation:none}
.atb-stk-b{display:block}
.atb-stk-b img{display:block;width:100%;height:auto;filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 3px 4px rgba(40,30,10,.22))}
@keyframes atbIn{0%{opacity:0;transform:translate(-50%,-90%) rotate(calc(var(--r) + 5deg)) scale(.7)}100%{opacity:1;transform:translate(-50%,-50%) rotate(calc(var(--r) + 5deg))}}
/* remove button on every sticker: black filled circle, white outline, white X, top-right (here and on /locker) */
.atb-stk .stk2-x,.bxsc-stk .stk2-x,.stk2-x{position:absolute;right:-6px;top:-6px;width:24px;height:24px;border-radius:50%;border:2px solid #fff;background:#111;color:#fff;font:700 14px/20px var(--sans,system-ui);text-align:center;padding:0;cursor:pointer;opacity:1;z-index:5;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.atb-stk .stk2-x:hover,.bxsc-stk .stk2-x:hover{background:#000;transform:scale(1.08)}
.bxsc-stk{overflow:visible}
.atb-note{position:absolute;bottom:92%;left:58%;display:flex;flex-direction:column;align-items:flex-start;transform:rotate(-5deg);pointer-events:none;z-index:9}
.atb-note-t{font:400 23px/1.05 'Akaya Telivigala',cursive;color:#111;white-space:nowrap}
.atb-b .atb-note-t{white-space:normal;width:190px;font-size:21px}
.atb-arr{width:22px;height:auto;margin:2px 0 0 6px}
.atb-mm{position:absolute;right:-8%;top:-14%;display:flex;flex-direction:column;align-items:center;gap:8px;transform:rotate(5deg);z-index:12}
.atb-burst{cursor:default;animation:mmWob 3.2s ease-in-out infinite, atbPop .5s cubic-bezier(.3,1.5,.5,1) both}
@keyframes atbPop{0%{scale:.2;opacity:0}100%{scale:1;opacity:1}}
.atb-mmgo{border-radius:0!important;font-size:11px;padding:9px 12px;white-space:nowrap}
.atb-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.atb-acts .btn{border-radius:0!important}
.kidschip{display:inline-flex;align-items:center;gap:8px;margin:14px 0 4px;padding:6px 10px;border:1.5px solid #1d1c1a;border-radius:0;font:500 13px/1 Barlow,var(--sans,sans-serif);color:#1d1c1a;text-decoration:none}
.kidschip span{font-size:15px;line-height:1}
.kidschip:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){
  .atb-box{width:92%;margin:0 auto}
  .atb-note-t{font-size:20px}.atb-b .atb-note-t{width:150px;font-size:18px}
  .atb-mm{right:-2%;top:-20%}.atb-mm .mm-burst{width:96px;height:96px;padding:14px;font-size:10.5px}
  .atb-acts .btn{flex:1 1 auto;justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){.atb-stk,.atb-hang img,.atb-burst{animation:none}}
/* desktop: the box floats under the buttons (out of flow), so nothing on the page moves when it appears */
@media (min-width:761px){
  .pv-info{position:relative}
  .atb-anchor{position:relative;height:0}
  .atb-anchor .atb{position:absolute;left:-4%;top:-14px;width:min(400px,100%);margin:0;z-index:4}
  .atb-anchor .atb-box{width:100%;margin:0}
}
.atb-arr{width:30px;margin:3px 0 0 10px}
@media (min-width:761px){.atb-anchor .atb{top:8px}}
/* C: the Mini & Me burst sits beside the box (desktop) / on the empty lid (mobile), never over the copy above */
.atb-mm{left:92%;right:auto;top:20%}
@media (max-width:760px){.atb-mm{left:auto;right:2%;top:4%}}
@media (max-width:760px){.atb-mm{position:relative;left:auto;right:auto;top:auto;flex-direction:row;justify-content:center;gap:12px;margin:6px 0 0;transform:rotate(5deg)}}

/* ===== Oct 18 late round ===== */
/* pinned collection Polaroid = the board's polaroid-mid raster (rectangle, ~1.4x taller than wide) */
.coll-pol.mid-pol,.bmg-pol.mid-pol{background:none!important;padding:0!important;box-shadow:none!important;filter:drop-shadow(1px 4px 7px rgba(0,0,0,.2));transform:rotate(-3deg)}
.coll-pol.mid-pol{flex:0 0 120px}
.mid-pol img{aspect-ratio:auto!important}
.mid-pol-ph{position:absolute;overflow:hidden;background:#fff}
.mid-pol-ph img{display:block;width:100%!important;height:100%!important;object-fit:contain!important;background:#fff!important;transform:rotate(var(--tilt,0deg)) scale(.94)}
.mid-pol-fr{position:relative;display:block;width:100%;height:auto;pointer-events:none}
.mid-pol-cap{position:absolute;left:8%;right:10%;bottom:3%;display:flex;align-items:center;justify-content:center;margin:0!important;font:600 13px/1.1 Barlow,var(--sans,sans-serif)!important;font-style:normal!important;color:var(--ink);text-align:center;transform:rotate(calc(var(--tilt,0deg) - .5deg))}
/* collections: Photoshop-layer snap. Full-size row stays, centred; no fades/flights on these pages */
.line.is-coll{margin:10px 0 6px}
.line.is-coll .pols{justify-content:center}
.pols .pol,.pols .pol .card,.coll-pol,.bmg-pol{transition:none!important}
.pols .pol.leaving,.pols.has-leaving .pol{animation:none!important;opacity:1!important;transform:none!important}
.coll-side.fade,.bmg-side.fade,.coll .fade,.bmg .fade,.coll .slidein,.slidein .coll{animation:none!important}
.coll .tile,.bmg .bmt{transition-duration:.12s!important}
/* the same ‹ chevron as the header, top-left of every panel / popover / modal */
.dd-in.has-pbk,.mcard-in.has-pbk{position:relative}
.pbk{position:absolute;left:6px;top:6px;z-index:40;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:0;background:transparent;color:var(--ink,#1d1c1a);cursor:pointer;padding:0;line-height:0}
.pbk svg{width:22px;height:22px}
.pbk:hover{background:rgba(0,0,0,.05)}
.pbk:focus-visible{outline:2px solid #8db9f4;outline-offset:1px}
.dd.dd-shut .dd-in,.dd-shut{display:none!important}
/* sidebar: the city row is the only one with an arrow */
.fs-cur{font-size:.85em;color:var(--mute,#777);font-weight:400}
.fs-types a::after,.fs-types a::before{content:none!important}
/* shop: category band first, as a snappy carousel with ‹ › buttons */
.cats-first{padding-bottom:18px}
.cats-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cats-hd h2.title{margin-bottom:18px}
.cats-ctl{display:flex;align-items:center;gap:8px;margin-bottom:22px}
.catnav{width:42px;height:42px;display:grid;place-items:center;border:1.5px solid var(--ink,#1d1c1a);border-radius:0;background:#fff;color:var(--ink,#1d1c1a);cursor:pointer;padding:0}
.catnav svg{width:22px;height:22px}.catnav.nx svg{transform:scaleX(-1)}
.catnav:hover{background:var(--ink,#1d1c1a);color:#fff}
.cats-first .cat-grid{scroll-snap-type:x mandatory;scroll-behavior:auto;scrollbar-width:none}
.cats-first .cat-grid::-webkit-scrollbar{display:none}
.cats-first .cat{scroll-snap-align:start}
.cats-grid{padding-top:10px}
.btn.sq,.artbtn{border-radius:0!important}
.art-side{display:inline-flex;margin-top:22px}
.ca-best{font:400 .62em/1 Barlow,var(--sans,sans-serif);color:var(--mute,#777);margin-left:6px;letter-spacing:0}
@media (max-width:760px){.cats-ctl{width:100%;margin-bottom:14px}.cats-ctl .art-top{margin-right:auto}}
.cats-first .cat-grid{grid-auto-columns:clamp(230px,21vw,300px)}
@media (max-width:760px){.cats-first .cat-grid{grid-auto-columns:62vw}}
@media (min-width:761px){.cityside > .pbk{display:none}}
.rail-city-w{position:relative;display:inline-block}
button.ptab{font:inherit;cursor:pointer}
.rail-cdrop{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);z-index:30;min-width:220px;max-height:340px;overflow:auto;background:#fff;border:1.5px solid var(--ink,#1d1c1a);border-radius:0;margin:0;padding:6px 0;list-style:none;box-shadow:0 10px 24px rgba(0,0,0,.12)}
.rail-cdrop li button{all:unset;box-sizing:border-box;display:block;width:100%;padding:8px 14px;font:500 13px/1.2 Barlow,var(--sans,sans-serif);cursor:pointer}
.rail-cdrop li button:hover,.rail-cdrop li button.on{text-decoration:underline;text-underline-offset:3px}
button.ptab{background:none;border:0;padding:0;color:inherit;-webkit-appearance:none;appearance:none}
@media (max-width:760px){
  .rail .r-types{justify-content:center;gap:10px;padding:0 8px}
  .r-types .ptab span{padding:8px 9px 7px;font-size:9.5px;letter-spacing:.1em;max-width:118px;white-space:normal;text-align:center;line-height:1.3}
  .r-types .ptab.blue{position:relative;right:auto;margin-left:0}
}
/* mix mode: blank paper tag + live handwritten line */
.atb-tag{position:relative;display:block;width:36%;margin-left:-4%;container-type:inline-size;transform-origin:50% 0;animation:sway 8s ease-in-out infinite}
.atb-hang-a .atb-tag img{width:100%;margin:0;animation:none}
.atb-tag-t{position:absolute;left:22%;right:18%;top:42%;bottom:14%;display:flex;align-items:center;justify-content:center;text-align:center;font:400 13.5cqw/1.25 'DD Hand','Kalam',cursive;color:#111;transform:rotate(-3deg);overflow-wrap:anywhere}
.atb-note.long .atb-note-t{white-space:normal;width:190px;font-size:21px}
@media (max-width:760px){.atb-note.long .atb-note-t{width:150px;font-size:18px}}
@media (prefers-reduced-motion:reduce){.atb-tag{animation:none}}
/* ×N badge moves to the bottom-right so the remove X owns the top-right corner */
.bxsc-stk .stk-q{top:auto;bottom:-6px;right:-6px}
/* windows that got the ‹: keep their first row clear of it */
.bxsc-pop.has-pbk,.modal.has-pbk,.fbnote.has-pbk,.pf-modal.has-pbk,.kl-pop.has-pbk,.mcard-in.has-pbk{padding-top:44px}
.mm-look.has-pbk > .pbk{left:10px;top:10px}
.mm-look.has-pbk .mm-look-box{padding-top:30px}

/* ===== Oct 18 priority: shop grid name-only, polaroid grid default, Barlow (the sidebar's font) everywhere Space Grotesk was ===== */
.hc-bare .hc-cap b{display:block;margin-top:10px}
.pst-name{font:600 14px/1.3 Barlow,system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important}
@media (max-width:760px){.pst-name{font-size:12.5px!important}}
.ca-top{position:relative}
.ca-bs{margin-left:auto;font:500 14px/1 Barlow,system-ui,sans-serif;color:var(--ink,#1d1c1a);text-decoration:underline;text-underline-offset:3px}
.ca-best{font-family:Barlow,system-ui,sans-serif!important}
/* Collections tag: smooth squash-bounce (~1s) then a rest; repeats every 3.5s */
@keyframes collSquish{
  0%,100%{transform:translateY(0) scale(1,1);border-radius:0}
  10%{transform:translateY(0) scale(1,1);border-radius:0}
  22%{transform:translateY(5px) scale(1.07,.9) perspective(300px) rotateX(6deg);border-radius:7px 7px 3px 3px}
  32%{transform:translateY(-2px) scale(.97,1.04);border-radius:2px}
  40%{transform:translateY(1px) scale(1.02,.98);border-radius:1px}
  48%{transform:translateY(0) scale(1,1);border-radius:0}
}
.ptab.blue span{animation:collSquish 3.5s cubic-bezier(.45,0,.25,1) .8s infinite!important;transform-origin:50% 0;will-change:transform}
.ptab.blue:hover span{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.ptab.blue span{animation:none!important}}
@media (min-width:761px){.atb-mm.low{top:58%;left:94%}}
/* ===== nav (Oct 18, item 23): Jordi's OLD header font back — Barlow Condensed, uppercase, letter-spaced — for every nav link incl. About + My client file.
   Brand stays Fredoka (two lines). 'Shop' always carries the light-blue underline. ===== */
body.navf-picked .hdr .nav a:not(.zz-nav),body.navf-picked .hdr .nav a.u-about:not(.zz-nav),body.navf-picked .hdr .filelink:not(.zz-nav),body.navf-picked .hdr .nav .dd-side a:not(.zz-nav),body.navf-picked .menu > a:not(.zz-nav),body.navf-picked .menu a:not(.logo):not(.zz-nav),body.navf-picked .menu button:not(.x):not(.zz-nav){font:500 13.5px/1 'Barlow Condensed','Arial Narrow',sans-serif!important;letter-spacing:.14em!important;text-transform:uppercase!important;font-style:normal!important}
body.navf-picked .nav{align-items:center}
body.navf-picked .nav > a,body.navf-picked .nav > div > a:first-child,body.navf-picked .nav > span > a:first-child{display:inline-block;line-height:1!important;padding:4px 0 4px!important;margin:0!important;vertical-align:baseline}
body.navf-picked .nav > div,body.navf-picked .nav > span{display:flex;align-items:center;margin:0;padding:0}
body.navf-picked .nav a.u-shop1{border-bottom:1.5px solid #8db9f4!important}
body.navf-picked .nav a.u-shop1.on{border-bottom-width:2px!important}
@media (max-width:900px){body.navf-picked .menu > a,body.navf-picked .menu a:not(.logo){font-size:16px!important}}
@media (min-width:901px){body.navf-picked .hdr .filelink{display:inline-flex;align-items:center;line-height:1!important;padding:4px 0!important}}
body.navf-picked .nav a.u-shop1.on{border-bottom-width:1.5px!important}
.menu > a[href="/shop"]{text-decoration-color:#8db9f4!important;text-decoration-thickness:2px!important}
/* ===== main box screen: box left (~55%), list right, big item card ===== */
.bxsc-split{display:grid;grid-template-columns:55% 1fr;gap:clamp(24px,3vw,56px);align-items:start;padding-right:4vw}
.bxsc-split .bxsc-stage{width:100%}
.bxsc-side{padding:clamp(24px,3vw,48px) 0 40px}
.bxsc-side-h{font:italic 800 clamp(28px,2.6vw,40px)/1.05 var(--serif);margin:0 0 18px}
.bxsc-list{list-style:none;margin:0 0 18px;padding:0;border-top:1px solid #d6d6d6}
.bxsc-li{all:unset;box-sizing:border-box;display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;width:100%;padding:12px 0;border-bottom:1px solid #d6d6d6;cursor:pointer}
.bxsc-li:hover .bxsc-li-n b,.bxsc-li.on .bxsc-li-n b{text-decoration:underline;text-underline-offset:3px}
.bxsc-li-th{width:64px;height:64px;background:#fff;display:grid;place-items:center}
.bxsc-li-th img{max-width:92%;max-height:92%;object-fit:contain}
.bxsc-li-n b{display:block;font:600 16px/1.25 Barlow,system-ui,sans-serif}
.bxsc-li-n small{display:block;font:400 13px/1.3 Barlow,system-ui,sans-serif;color:#666;margin-top:2px}
.bxsc-li-q{font:600 15px Barlow,system-ui,sans-serif}
.bxsc-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.bxsc-acts .btn,.bxsc-card .btn,.kl-boxlist .btn{border-radius:0!important}
.bxsc-scrim{z-index:88}
.bxsc-card{position:fixed;z-index:89;left:50%;top:50%;transform:translate(-50%,-50%);width:min(860px,94vw);max-height:90vh;overflow:auto;background:#fff;border:1px solid #1d1c1a;border-radius:0;display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:48px 28px 28px;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.bxsc-card .x{position:absolute;right:10px;top:10px;border-radius:0!important}
.bxsc-card-img{background:#f6f4f0;display:grid;place-items:center;aspect-ratio:1}
.bxsc-card-img img{max-width:90%;max-height:90%;object-fit:contain}
.bxsc-card-t h3{font:italic 800 28px/1.1 var(--serif);margin:6px 0 10px}
.bxsc-card-d{font:400 15px/1.5 Barlow,system-ui,sans-serif;color:#444;margin:0 0 12px}
.bxsc-card-o{font:400 14px/1.4 Barlow,system-ui,sans-serif;color:#666;margin:0 0 8px}
.bxsc-card .bxsc-pop-q{display:flex;align-items:center;justify-content:space-between;margin:16px 0;padding:12px 0;border-top:1px solid #e3e0da;border-bottom:1px solid #e3e0da}
.bxsc-card-a{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.bxsc-card.has-pbk{padding-top:48px}
@media (max-width:900px){
  .bxsc-split{display:block;padding:0}
  .bxsc-side{padding:24px 20px 40px}
  .bxsc-card{grid-template-columns:1fr;gap:16px;padding:46px 18px 20px;width:94vw}
  .bxsc-card-img{aspect-ratio:4/3}
}
/* Kids Lab in 'my box' mode */
.klh-mine{position:absolute;left:41%;top:33%;margin:0;display:flex;flex-direction:column;align-items:flex-start;pointer-events:none;z-index:4;transform:rotate(-4deg)}
.klh-mine span{font:400 clamp(18px,1.6vw,26px)/1.1 'Akaya Telivigala',cursive;color:#1d1c1a;white-space:nowrap}
.klh-mine img{width:clamp(40px,4vw,64px);height:auto;margin:4px 0 0 -10px;transform:scaleX(1)}
.kl-boxlist{max-width:1100px;margin:0 auto;padding:40px 4vw 60px}
@media (max-width:760px){.klh-mine{left:46%;top:22%}.klh-mine span{font-size:17px}}
.klh-mine{left:29%;top:27%}
@media (max-width:760px){.klh-mine{left:40%;top:20%}}
.kl-note[hidden]{display:none!important}
@media (max-width:760px){.klh-mine{left:54%;top:7%}.klh-mine span{white-space:normal;max-width:40vw;font-size:16px}}
/* item 26: empty kids box loop */
.klh-loop .klh-stk .stk2-b{transform-origin:50% 60%;will-change:transform,opacity}
.klh-empty{max-width:15em;transform-origin:0 100%}
.klh-empty span{white-space:normal}
@media (prefers-reduced-motion:reduce){
  .klh-loop .klh-stk .stk2-b,.klh-loop .klh-empty{animation:none!important;opacity:1;visibility:visible;transform:none}
  .klh-loop .klh-stk.later{display:none}
}
/* mobile fixes: big card fits, note not under the header */
.bxsc-card>*{min-width:0}.bxsc-card{box-sizing:border-box}
@media (max-width:900px){.bxsc-card{left:3vw;right:3vw;width:auto;transform:translateY(-50%)}}
@media (max-width:760px){.klh-mine{left:57%;top:17%}.klh-mine span{max-width:38vw;font-size:15px}}
.klh-loop .klh-stk{pointer-events:none}.klh-loop .klh-stk .stk2-b{pointer-events:auto}
/* mobile stage is 165vw wide from -3vw: the note sits over the box's right side, inside the screen */
@media (max-width:760px){.klh-mine{left:34%;top:12%}.klh-mine span{max-width:40vw;font-size:15px}.klh-mine img{width:36px}}
@media (max-width:760px){.klh-mine{top:15%}}
/* ===== item 27: Jordi's original collection-card wiggle (exact values), on the hanging collection Polaroids ===== */
.pols .pol .coll-card{transition:transform .25s ease,filter .2s}
.pols .pol:nth-child(8n+1) .coll-card{transform:rotate(-1.5deg);--rot:-1.5deg}
.pols .pol:nth-child(8n+2) .coll-card{transform:rotate(1deg);--rot:1deg}
.pols .pol:nth-child(8n+3) .coll-card{transform:rotate(-0.8deg);--rot:-0.8deg}
.pols .pol:nth-child(8n+4) .coll-card{transform:rotate(1.5deg);--rot:1.5deg}
.pols .pol:nth-child(8n+5) .coll-card{transform:rotate(-1.2deg);--rot:-1.2deg}
/* 6–8 continue her alternating, slightly varied tilts */
.pols .pol:nth-child(8n+6) .coll-card{transform:rotate(0.8deg);--rot:0.8deg}
.pols .pol:nth-child(8n+7) .coll-card{transform:rotate(-1deg);--rot:-1deg}
.pols .pol:nth-child(8n+8) .coll-card{transform:rotate(1.2deg);--rot:1.2deg}
.pols .pol:hover .coll-card{transform:rotate(0deg);filter:brightness(0.97)}
@keyframes coll-card-intro{
  0%  {transform:rotate(var(--rot));filter:brightness(1)}
  20% {transform:rotate(0deg);filter:brightness(0.97)}
  40% {transform:rotate(var(--rot));filter:brightness(1)}
  60% {transform:rotate(0deg);filter:brightness(0.97)}
  80% {transform:rotate(var(--rot));filter:brightness(1)}
  100%{transform:rotate(var(--rot));filter:brightness(1)}
}
.pols .pol .coll-card.intro-play{animation:coll-card-intro 2s ease both}
@media (prefers-reduced-motion:reduce){.pols .pol .coll-card.intro-play{animation:none}}
/* ===== item 28: Coach's picks heading ===== */
.ca-hblock{display:flex;flex-direction:column;gap:2px}
.ca-hblock .benchh{margin:0}
.ca-coach{font:400 .5em/1 'Akaya Telivigala',cursive!important;color:#5b5953;margin-left:8px;letter-spacing:0;text-transform:none;vertical-align:.18em}
.ca-sub{font:400 14px/1.2 Barlow,system-ui,sans-serif;color:#8a877f;text-transform:none;letter-spacing:0}
/* ===== item 29: category row, 5 up, looping, arrows either side (layout of the tiles unchanged) ===== */
.cat-loop{position:relative}
.cat-vp{overflow:hidden;container-type:inline-size;border-top:1px solid #ddd;border-bottom:1px solid #ddd}
.cats-first .cat-grid.cat-track{display:flex;overflow:visible;border:0;scroll-snap-type:none;transform:translateX(calc(var(--pos) * -20cqw));transition:transform .32s cubic-bezier(.45,0,.25,1);will-change:transform}
.cats-first .cat-track>.cat{flex:0 0 20cqw;scroll-snap-align:none}
.catarr{position:absolute;top:50%;z-index:5;transform:translateY(-50%);width:40px;height:56px;display:grid;place-items:center;border:0;border-radius:0;background:#fff;color:#1d1c1a;font:400 40px/1 Barlow,system-ui,sans-serif;padding:0 0 6px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.catarr.prev{left:0}.catarr.next{right:0}
.catarr:hover{background:#1d1c1a;color:#fff}
@media (max-width:760px){
  .cats-first .cat-grid.cat-track{transform:translateX(calc(var(--pos) * -50cqw))}
  .cats-first .cat-track>.cat{flex:0 0 50cqw}
  .catarr{width:32px;height:46px;font-size:32px}
}
@media (prefers-reduced-motion:reduce){.cats-first .cat-grid.cat-track{transition:none}}
/* ===== nav (Oct 18 review): 'About' back to Jordi's pick — Fredoka, normal case — the other links stay Barlow Condensed caps.
   Links share one text baseline (baseline alignment instead of centring, since About is a different font). ===== */
body.navf-picked .hdr .nav a.u-about:not(.zz-nav):not(.zz-nav2),body.navf-picked .menu > a[href="/about"]:not(.zz-nav):not(.zz-nav2){font:500 16px/1 'Fredoka',system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important}
body.navf-picked .hdr .nav,body.navf-picked .hdr .nav > div,body.navf-picked .hdr .nav > span{align-items:baseline!important}
body.navf-picked .hdr .nav a.u-about:not(.zz-nav):not(.zz-nav2){font-size:15px!important;color:inherit}
/* Oct 19 1:16 PM Jordi: "maybe about should just match all of them too" → 'About' = exactly the other nav links (Barlow Condensed 500, caps, .18em), no Fredoka, desktop nav + phone menu */
body.navf-picked .hdr .nav a.u-about:not(.zz-nav):not(.zz-nav2),body.navf-picked .menu > a[href="/about"]:not(.zz-nav):not(.zz-nav2){font:500 13.5px/1 'Barlow Condensed','Arial Narrow',sans-serif!important;letter-spacing:.18em!important;text-transform:uppercase!important}
body.navf-picked .hdr .nav a.u-about:not(.zz-nav):not(.zz-nav2):not(.on){color:#555}
/* ===== item 31: shop grid = single real Polaroids =====
   frame: even ~6% white border top/left/right, ~22% bottom strip with the title; photo in a light grey square window */
.pst.pol1{aspect-ratio:auto}
.p1-card{display:flex;flex-direction:column;background:#fff;padding:6% 6% 0;box-shadow:0 6px 18px rgba(0,0,0,.13),0 1px 3px rgba(0,0,0,.08);transform:rotate(var(--t,-1.5deg));transition:transform .35s cubic-bezier(.3,.8,.3,1)}
.pgrid .pst.pol1:nth-child(3n+2) .p1-card{--t:1.2deg}
.pgrid .pst.pol1:nth-child(3n) .p1-card{--t:-.6deg}
.pst.pol1:hover .p1-card{transform:rotate(0deg) translateY(-3px)}
.p1-win{position:relative;display:block;aspect-ratio:1/1;background:#efeeea;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.p1-win img{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain;transition:opacity .3s ease}
.p1-win .p1-b{opacity:0}
.pst.pol1.has-b:hover .p1-f{opacity:0}.pst.pol1.has-b:hover .p1-b{opacity:1}
.p1-win .pst-soon{position:absolute;inset:0;display:grid;place-items:center}
.p1-name{display:flex;align-items:center;justify-content:center;text-align:center;aspect-ratio:100/22;width:100%;padding:0 4%;box-sizing:border-box;font:600 14px/1.25 Barlow,system-ui,sans-serif;color:var(--ink,#1d1c1a)}
@media (max-width:760px){.p1-name{font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.p1-card,.p1-win img{transition:none}}
.p1-name{aspect-ratio:88/22}
.p1-win img{mix-blend-mode:multiply}  /* white-backed product photos melt into the grey window, so the garment sits inside it */
/* ===== shop grid: two real Polaroids (Jordi's Indy 500 reference) =====
   off-white frame, light grey mat line around a white photo window, thick bottom strip; back Polaroid offset right + tilted the other way */
.pst.pol2{aspect-ratio:auto;padding:0 9% 5% 0}
.p2{display:flex;flex-direction:column;width:100%;box-sizing:border-box;background:#fbfbf9;padding:6.5% 6.5% 0;box-shadow:0 10px 24px rgba(0,0,0,.14),0 2px 5px rgba(0,0,0,.08)}
.p2-win{position:relative;display:block;aspect-ratio:1/1;background:#fff;border:clamp(4px,3.2%,9px) solid #e9e8e3;box-sizing:border-box;overflow:hidden}
.p2-win img{position:absolute;inset:5%;width:90%;height:90%;object-fit:contain}
.p2-win .pst-soon{position:absolute;inset:0;display:grid;place-items:center}
.p2-name{display:flex;align-items:center;justify-content:center;text-align:center;aspect-ratio:87/22;width:100%;padding:0 4%;box-sizing:border-box;font:600 14px/1.25 Barlow,system-ui,sans-serif;color:var(--ink,#1d1c1a)}
.p2-f{position:relative;z-index:2;transform:rotate(-2deg)}
.p2-b{position:absolute;z-index:1;left:9%;top:2.5%;width:91%;transform:rotate(3deg);box-shadow:0 6px 16px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08)}
.p2-b .p2-name{color:#8a877f;font-weight:500}
.pst.pol2:not(.has-b){padding-right:4%}
/* hover: snap the back one to the front (no dissolve, no tween) */
.p2{transition:none}
.pst.pol2.has-b:hover .p2-b{z-index:3;transform:rotate(-2deg) translate(-9%,-2.5%)}
.pst.pol2.has-b:hover .p2-f{z-index:1;transform:rotate(3deg) translate(9%,2.5%)}
.pst.pol2.has-b:hover .p2-b .p2-name{color:var(--ink,#1d1c1a);font-weight:600}
@media (max-width:760px){.p2-name{font-size:12px}.pgrid{gap:34px 26px}}
/* ===== shop grid Polaroids, tuned to Jordi's close-up (primary reference): off-white frame with a faint edge line, light grey inset mat around a
   WHITE portrait photo window, thick bottom strip with only the title (no pen marks); back Polaroid tight behind (about half the reference offset) ===== */
.pst.pol2{padding:0 5% 3% 0}
.p2{position:relative;background:#f7f6f3;padding:7.5% 7.5% 0;box-shadow:0 1px 2px rgba(0,0,0,.10),0 8px 18px rgba(0,0,0,.10),0 18px 36px rgba(0,0,0,.06)}
.p2::after{content:"";position:absolute;inset:2.4%;border:1px solid rgba(0,0,0,.055);pointer-events:none}
.p2-win{aspect-ratio:4/5;background:#fff;border:clamp(4px,3.6%,10px) solid #e8e7e2;outline:1px solid #dddcd6;outline-offset:0}
.p2-win img{inset:6%;width:88%;height:88%;mix-blend-mode:normal}
.p2-name{aspect-ratio:85/24}
.p2-f{transform:rotate(-2.2deg)}
.p2-b{left:5%;top:1.6%;width:95%;transform:rotate(1.6deg);box-shadow:0 1px 2px rgba(0,0,0,.09),0 6px 14px rgba(0,0,0,.08)}
.p2-b .p2-name{color:#9b988f}
.pst.pol2.has-b:hover .p2-b{transform:rotate(-2.2deg) translate(-5%,-1.6%)}
.pst.pol2.has-b:hover .p2-f{transform:rotate(1.6deg) translate(5%,1.6%)}
/* double Polaroid: fix (back card must stay absolute) + name/toggle strip + snap switch */
.p2.p2-b{position:absolute}
.p2-strip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;aspect-ratio:85/26;width:100%;padding:0 4%;box-sizing:border-box}
.p2-strip .p2-name{aspect-ratio:auto;padding:0}
.p2-sw{appearance:none;border:1px solid #cfcdc6;border-radius:0;background:#efeee9;color:#6f6c65;font:500 11.5px/1 Barlow,system-ui,sans-serif;letter-spacing:.02em;padding:5px 9px;cursor:pointer}
.p2-sw:hover{background:#e4e2dc;color:#3f3d39}
.p2-sw:focus-visible{outline:2px solid #8db9f4;outline-offset:2px}
.p2-b .p2-sw{pointer-events:none}  /* only the front card's toggle is live */
/* no hover swap any more: the toggle decides; snap, no tween */
.pst.pol2.has-b:hover .p2-b{z-index:1;transform:rotate(1.6deg)}
.pst.pol2.has-b:hover .p2-f{z-index:2;transform:rotate(-2.2deg)}
.pst.pol2.has-b:hover .p2-b .p2-name{color:#9b988f;font-weight:500}
.pst.pol2.has-b.flip .p2-b,.pst.pol2.has-b.flip:hover .p2-b{z-index:3;transform:rotate(-2.2deg) translate(-5%,-1.6%)}
.pst.pol2.has-b.flip .p2-f,.pst.pol2.has-b.flip:hover .p2-f{z-index:1;transform:rotate(1.6deg) translate(5%,1.6%)}
.pst.pol2.has-b.flip .p2-b .p2-name{color:var(--ink,#1d1c1a);font-weight:600}
.pst.pol2.has-b.flip .p2-f .p2-name{color:#9b988f;font-weight:500}
.pst.pol2.has-b.flip .p2-b .p2-sw{pointer-events:auto}.pst.pol2.has-b.flip .p2-f .p2-sw{pointer-events:none}
@media (max-width:760px){.p2-sw{font-size:10.5px;padding:4px 7px}.p2-strip{aspect-ratio:85/30;gap:4px}}
/* mobile: strip grows with the name (up to 2 lines) so the toggle always sits inside the frame, even padding below it */
@media (max-width:760px){
  .p2-strip{aspect-ratio:auto;min-height:26%;padding:9px 5% 11px;gap:6px}
  .p2-strip .p2-name{font-size:12px;line-height:1.25}
  .p2-sw{font-size:9.5px;padding:3px 6px}
}
/* ===== double Polaroids, Jordi round 2: toggle is plain text UNDER the card; front card upright, only the back one tilts (per piece) ===== */
.pst.pol2{padding:0 0 0 0;margin:0 7% 0 0}
.pst.pol2:not(.has-b){margin-right:4%}
.p2-strip{aspect-ratio:85/22;min-height:0;padding:0 4%;gap:0}
.p2-f,.pst.pol2.has-b:hover .p2-f{transform:none}
.p2.p2-b,.pst.pol2.has-b:hover .p2-b{left:0;top:0;width:100%;height:auto;transform:translate(var(--bx,4%),var(--by,1.5%)) rotate(var(--bt,3deg));transform-origin:50% 50%}
.pst.pol2.has-b.flip .p2-b,.pst.pol2.has-b.flip:hover .p2-b{z-index:3;transform:none}
.pst.pol2.has-b.flip .p2-f,.pst.pol2.has-b.flip:hover .p2-f{z-index:1;transform:translate(var(--bx,4%),var(--by,1.5%)) rotate(var(--bt,3deg))}
.p2-sw2{appearance:none;display:block;margin:14px auto 0;border:0;background:none;padding:2px 4px;border-radius:0;font:500 13px/1.2 Barlow,system-ui,sans-serif;color:#8a877f;cursor:pointer;text-underline-offset:3px}
.p2-sw2:hover{color:#4a4844;text-decoration:underline}
.p2-sw2:focus-visible{outline:2px solid #8db9f4;outline-offset:2px}
@media (max-width:760px){
  .p2-strip{aspect-ratio:auto;min-height:0;padding:9px 5% 10px}
  .p2-sw2{font-size:12px;margin-top:11px}
}
/* ===== Polaroid round 3: felt-marker title + short strip (~14% of card height, like her reference) ===== */
.pst.pol2 .p2-strip{aspect-ratio:85/18.5;padding:0 4%}
.pst.pol2 .p2-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-align:center;font-weight:400!important;color:#2a2926;line-height:1.05}
.pst.pol2.pf-gochi .p2-name{font-family:'Gochi Hand',cursive!important;font-size:19px}
.pst.pol2.pf-marker .p2-name{font-family:'Permanent Marker',cursive!important;font-size:15px}
.pst.pol2.pf-rocksalt .p2-name{font-family:'Rock Salt',cursive!important;font-size:12px;line-height:1.35}
.pst.pol2.pf-nanum .p2-name{font-family:'Nanum Pen Script',cursive!important;font-size:24px;line-height:.95}
.pst.pol2.pf-covered .p2-name{font-family:'Covered By Your Grace',cursive!important;font-size:20px}
.pst.pol2 .p2-b .p2-name,.pst.pol2.flip .p2-f .p2-name{color:#7d7a72}
.pst.pol2.flip .p2-b .p2-name{color:#2a2926}
@media (max-width:760px){
  .pst.pol2 .p2-strip{aspect-ratio:85/19;padding:0 4%}
  .pst.pol2.pf-gochi .p2-name{font-size:13.5px}
  .pst.pol2.pf-marker .p2-name{font-size:11px}
  .pst.pol2.pf-rocksalt .p2-name{font-size:8.5px}
  .pst.pol2.pf-nanum .p2-name{font-size:17px}
  .pst.pol2.pf-covered .p2-name{font-size:14.5px}
}
/* marker title sized to the card (container units): fits 1 line where it can, 2 max, inside the short strip */
.pst.pol2 .p2{container-type:inline-size}
.pst.pol2 .p2-strip{aspect-ratio:auto;height:18.5cqw;padding:0 4%}
.pst.pol2.pf-gochi .p2-name{font-size:7.4cqw}
.pst.pol2.pf-marker .p2-name{font-size:6.2cqw}
.pst.pol2.pf-rocksalt .p2-name{font-size:4.9cqw;line-height:1.3}
.pst.pol2.pf-nanum .p2-name{font-size:9.4cqw;line-height:.92}
.pst.pol2.pf-covered .p2-name{font-size:7.8cqw}
@media (max-width:760px){
  .pst.pol2 .p2-strip{height:19cqw}
  .pst.pol2.pf-gochi .p2-name{font-size:7.6cqw}
  .pst.pol2.pf-marker .p2-name{font-size:6.4cqw}
  .pst.pol2.pf-rocksalt .p2-name{font-size:5cqw}
  .pst.pol2.pf-nanum .p2-name{font-size:9.6cqw}
  .pst.pol2.pf-covered .p2-name{font-size:8cqw}
}
.pst.pol2.pf-gochi .p2-name{font-size:9cqw}
.pst.pol2.pf-marker .p2-name{font-size:7.4cqw}
.pst.pol2.pf-rocksalt .p2-name{font-size:5.9cqw}
.pst.pol2.pf-nanum .p2-name{font-size:11.2cqw}
.pst.pol2.pf-covered .p2-name{font-size:9.4cqw}
.pst.pol2 .p2-strip{height:19cqw}
@media (max-width:760px){
  .pst.pol2.pf-gochi .p2-name{font-size:9cqw}
  .pst.pol2.pf-marker .p2-name{font-size:7.4cqw}
  .pst.pol2.pf-rocksalt .p2-name{font-size:5.9cqw}
  .pst.pol2.pf-nanum .p2-name{font-size:11.2cqw}
  .pst.pol2.pf-covered .p2-name{font-size:9.4cqw}
  .pst.pol2 .p2-strip{height:20cqw}
}
.pst.pol2 .p2-strip{height:21.5cqw}
@media (max-width:760px){.pst.pol2 .p2-strip{height:21.5cqw}}
.pst.pol2 .p2-strip{height:auto;min-height:21.5cqw;padding:1.4cqw 4%}
.pst.pol2:not(.has-b){margin-right:7%}
@media (max-width:760px){.pst.pol2 .p2-strip{height:auto;min-height:21.5cqw}}
@media (hover:none){.p2-sw2:hover{color:#8a877f;text-decoration:none}}
/* h24 fixes: back Polaroid peeks out more (room for it), title padding clears the frame's inner edge line */
.pst.pol2,.pst.pol2:not(.has-b){margin:0 9% 4% 0}
.pst.pol2 .p2-strip{padding:1.6cqw 5% 4.2cqw}
@media (max-width:760px){
  .pst.pol2.pf-gochi .p2-name{font-size:8.2cqw}
  .pst.pol2.pf-marker .p2-name{font-size:6.8cqw}
  .pst.pol2.pf-covered .p2-name{font-size:8.6cqw}
  .pst.pol2.pf-nanum .p2-name{font-size:10.2cqw}
  .pst.pol2.pf-rocksalt .p2-name{font-size:5.4cqw}
  .pst.pol2 .p2-strip{min-height:21.5cqw;padding:1.6cqw 5% 4.4cqw}
}
.pst.pol2.pf-gochi .p2-name{font-size:8.2cqw}
.pst.pol2.pf-marker .p2-name{font-size:6.8cqw}
.pst.pol2.pf-covered .p2-name{font-size:8.6cqw}
.pst.pol2.pf-nanum .p2-name{font-size:10.2cqw}
.pst.pol2.pf-rocksalt .p2-name{font-size:5.4cqw}
.pst.pol2 .p2-name{line-height:1.15;padding-bottom:.08em}
/* ===== Polaroid geometry measured from Jordi's close-up (tools: /workspace/dv/measure.py, deskewed 2°), in card widths W:
   card 524×782 px → W:H 0.670 · frame side 25px = 4.8% W, top 24px = 4.6% W · grey mat band 18px = 3.4% W (incl. a 2px darker line at its outer edge)
   mat outer 474×620 → 0.765 · white photo window 438×588 → 0.745 · bottom strip 138px = 17.6% of H = 26.3% W = 5.5× the side border.
   Colours sampled: frame #faf9f7, mat #f2f0ec, mat line #e2e1de. (1cqw = 1% of the card's content width = 0.904% W) ===== */
.pst.pol2 .p2{padding:4.6% 4.8% 0;background:#faf9f7}
.pst.pol2 .p2::after{display:none}
.pst.pol2 .p2-win{aspect-ratio:474/620;border:3.76cqw solid #f2f0ec;outline:none;box-shadow:0 0 0 .3cqw #e2e1de;background:#fff;box-sizing:border-box}
.pst.pol2 .p2-win img{inset:4%;width:92%;height:92%}
.pst.pol2 .p2-strip,.pst.pol2 .p2-strip{height:29.1cqw;min-height:0;padding:0 5%;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
.pst.pol2.pf-rocksalt .p2-name{font-size:5.6cqw;line-height:1.45;padding:0}
@media (max-width:760px){.pst.pol2 .p2-strip{height:29.1cqw;min-height:0;padding:0 4%}.pst.pol2.pf-rocksalt .p2-name{font-size:5.6cqw}}
/* Rock Salt is very wide: keep it readable (≈12px desktop, ≈10px mobile); short names stay on 1 line, long ones wrap to 2 inside the strip */
.pst.pol2.pf-rocksalt .p2-name{font-size:6.3cqw;line-height:1.32;color:#2a2926}
@media (max-width:760px){.pst.pol2.pf-rocksalt .p2-name{font-size:7.2cqw;line-height:1.28}}
.pst.pol2.pf-rocksalt .p2-name{line-height:1.55}
@media (max-width:760px){.pst.pol2.pf-rocksalt .p2-name{line-height:1.5}}
.pst.pol2.pf-rocksalt .p2-name{padding:.2em 0 .35em}  /* room for Rock Salt descenders inside the 2-line clamp */

/* ===== Oct 18 (8:38 PM) Shop by Category: tones, tilts, bigger garments, round arrows ===== */
.cats-first .cat-loop.cat-big .cat-track>.cat{background:var(--tone,#262626)}
.cats-first .cat-loop.cat-big .cat-grid.cat-track{transition:transform .5s cubic-bezier(.45,0,.25,1)}
.cats-first .cat-loop.cat-big .cat-track>.cat{min-height:clamp(340px,33vw,450px)}
.cat-loop.cat-big .cat-img{top:7%;width:86%;max-height:59%;
  transform:translateX(-50%) rotate(calc(var(--r,0deg) + var(--dir,1) * var(--sp,0) * var(--spdeg,7deg)));
  transition:transform .25s ease-out;transform-origin:50% 60%}
.cat-loop.cat-big .cat:hover .cat-img{transform:translateX(-50%) translateY(-6px) rotate(calc(var(--r,0deg) + var(--dir,1) * var(--sp,0) * var(--spdeg,7deg)))}
.cat-loop.cat-big .catarr{width:56px;height:56px;border-radius:50%;background:#2b2b2b;color:#fff;font:500 40px/1 Barlow,system-ui,sans-serif;padding:0 0 5px;
  box-shadow:0 6px 18px rgba(0,0,0,.30),0 2px 4px rgba(0,0,0,.18);transition:background .15s,transform .15s}
.cat-loop.cat-big .catarr.prev{left:16px;padding-right:3px}.cat-loop.cat-big .catarr.next{right:16px;padding-left:3px}
.cat-loop.cat-big .catarr:hover{background:#000;color:#fff}
.cat-loop.cat-big .catarr:active{transform:translateY(-50%) scale(.94)}
@media (max-width:760px){
  .cat-loop.cat-big .cat-img{max-height:58%;width:90%}
  .cat-loop.cat-big .catarr{width:44px;height:44px;font-size:32px;padding-bottom:4px}
  .cat-loop.cat-big .catarr.prev{left:10px}.cat-loop.cat-big .catarr.next{right:10px}
}
@media (prefers-reduced-motion:reduce){.cat-loop.cat-big .cat-img{--sp:0 !important;transition:none}.cats-first .cat-loop.cat-big .cat-grid.cat-track{transition:none}}

/* ===== Oct 18 (8:38 PM) Custom order board: full screen width (SEED.orderBoard.fullBleed) ===== */
@media(min-width:861px){
  .b3.b3.b3-full:not(.b3-col) .shell{grid-template-columns:minmax(0,1fr) clamp(400px,33vw,560px);column-gap:clamp(20px,2.2vw,32px);max-width:none;width:100%;margin:0;padding:24px clamp(18px,2.8vw,40px) 0}
  .b3.b3.b3-full:not(.b3-col) .feed{zoom:1}
  .b3.b3.b3-full:not(.b3-col) .qr{top:calc(var(--b3nav) + 24px);height:calc(100vh - var(--b3nav) - 48px)}
}

/* ===== Oct 18 (8:38 PM) Contact page: Studio header, phone-mail form extras, calculator card ===== */
.contact-studio .contact-sub2{font:400 clamp(18px,1.6vw,21px)/1.5 var(--sans);color:var(--ink2);margin:10px 0 0;max-width:34em}
.contact-studio .contact-box{margin-top:26px}
.mail-body2{padding-top:14px}
.mail-body2 .mail-greet{display:block;font:500 14px/1.6 var(--mono2);color:#222;margin-bottom:4px;user-select:none}
.mail-inline .mail-body2 textarea{min-height:130px}
.mail-extras{border-top:1px solid #ececec;padding:12px 16px 14px}
.mail-stk{display:flex;gap:2px;justify-content:flex-start;flex-wrap:wrap;margin:0 0 12px}
.mail-stk img{width:46px;height:46px;object-fit:contain;transform:rotate(var(--t,0deg));pointer-events:none;
  filter:drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(1px 2px 3px rgba(0,0,0,.22))}
.mail-att{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mail-attach{display:inline-flex;align-items:center;gap:8px;border:1.5px solid #1d1c1a;border-radius:0;padding:8px 13px;font:600 13px/1 Barlow,system-ui,sans-serif;letter-spacing:.02em;color:#1d1c1a;background:#fff;cursor:pointer}
.mail-attach .ma-plus{font:500 20px/0.8 Barlow,system-ui,sans-serif}
.mail-attach:hover{background:#1d1c1a;color:#fff}
.mail-attach:focus-within{outline:2px solid #8db9f4;outline-offset:2px}
.mail-chip{display:inline-flex;align-items:center;gap:4px}
.mail-chip:empty{display:none}
.mail-chip img{width:42px;height:42px;object-fit:cover;border:1px solid #ddd}
.mail-chip button{border:0;background:none;font:400 20px/1 Barlow,sans-serif;color:#777;cursor:pointer;padding:2px 4px}
.mail-ahint{font:400 13px/1.4 Barlow,system-ui,sans-serif;color:#8a8780}
.contact-calc{display:flex;align-items:center;gap:18px;width:min(520px,100%);margin:22px auto 0;padding:16px 20px;background:#fff7d6;border:1px solid #efe3ad;box-shadow:0 10px 26px -18px rgba(0,0,0,.28);box-sizing:border-box}
.contact-calc .cc-img{width:74px;height:auto;flex:0 0 auto;transform:rotate(-6deg);filter:drop-shadow(0 6px 8px rgba(0,0,0,.16))}
.contact-calc p{margin:0 0 10px;font:500 16px/1.5 var(--sans);color:#2a2926}
.contact-calc .cc-btn{border-radius:0}
@media (max-width:760px){
  .mail-stk img{width:40px;height:40px}
  .contact-calc{gap:14px;padding:14px 16px}
  .contact-calc .cc-img{width:60px}
  .contact-calc p{font-size:15px}
}

/* ===== Oct 18 (8:48 PM) Custom order board landing: the board is the hero (SEED.orderBoard.heroLanding) ===== */
/* empty board copy: three lines */
.b3.b3 .b3-empty3 .qr-empty-ttl{font:400 clamp(20px,1.9vw,28px)/1.2 var(--serif);font-style:italic;color:var(--ink);margin:0 auto 8px;max-width:22em}
/* h65: restore approved empty-board fonts (serif main + mono sub) — not grey Barlow/sans */
.b3.b3 .b3-empty3 .qr-empty-main{font:400 clamp(16px,1.5vw,22px)/1.35 var(--serif);letter-spacing:0.02em;color:var(--ink2);opacity:.72;margin:0 auto 4px;max-width:30em}
.b3.b3 .b3-empty3 .qr-empty-sub{font:400 clamp(10px,.95vw,13px)/1.55 var(--mono);letter-spacing:0.1em;color:var(--mute);text-transform:none}
/* demo pins */
.b3.b3 .b3-demo{position:absolute;inset:0;pointer-events:none;z-index:3}
.b3.b3 .b3-dp{position:absolute;transform:rotate(var(--r));transform-origin:50% 50%}
.b3.b3 .b3-dp-img{height:auto;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(1px 4px 6px rgba(0,0,0,.22))}
.b3.b3 .b3-demo .pin{width:auto;min-width:96px;max-width:none}
.b3.b3 .b3-demo .pin.bub{min-width:0}
.b3.b3.b3 .b3-dp{animation:b3popoff .5s cubic-bezier(.34,1.56,.64,1) var(--d) both}
@keyframes b3popoff{0%{transform:rotate(var(--r)) scale(1);opacity:1}35%{transform:rotate(var(--r)) translateY(-10px) scale(1.16);opacity:1}100%{transform:rotate(calc(var(--r) + 14deg)) translateY(-26px) scale(0);opacity:0}}
.b3.b3 .b3-hempty{position:absolute;left:50%;top:50%;width:min(560px,86%);padding:0;transform:translate(-50%,-50%);animation:b3popin .5s cubic-bezier(.34,1.56,.64,1) var(--de,0s) both;z-index:2}
@keyframes b3popin{0%{opacity:0;transform:translate(-50%,-44%) scale(.92)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.b3.b3 .qr-stream:has(.b3-demo){overflow:hidden}
/* calculator on the board edge + Jordi's arrow note */
.b3.b3 .qr:has(.b3-hcalc){overflow:visible}
.b3.b3 .b3-hcalc{position:absolute;right:-26px;bottom:7%;width:clamp(150px,13vw,200px);padding:0;border:0;background:none;cursor:pointer;z-index:8;animation:b3calcfloat 3.6s ease-in-out infinite}
.b3.b3 .b3-hcalc img{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 18px rgba(0,0,0,.2))}
.b3.b3 .b3-hnote{position:absolute;right:calc(clamp(150px,13vw,200px) - 34px);bottom:calc(7% + clamp(130px,11vw,170px));display:flex;flex-direction:column;align-items:flex-start;z-index:8;pointer-events:none;
  font:400 clamp(22px,1.9vw,28px)/1.05 'Akaya Telivigala',cursive;color:#6b6b6b;transform-origin:100% 100%;animation:b3notepop .55s cubic-bezier(.34,1.56,.64,1) var(--dn,3.5s) both}
.b3.b3 .b3-hnote span{white-space:nowrap;transform:rotate(-4deg);margin:0 0 2px -10px}
.b3.b3 .b3-hnote img{width:clamp(70px,6vw,96px);height:auto;margin-left:46px}
@keyframes b3notepop{0%{opacity:0;transform:scale(.4) rotate(-8deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.b3.b3 .b3-hdown{display:none}
.b3.b3 .b3-hhead{display:none}
@media(min-width:861px){
  .b3.b3.b3-hero:not(.b3-col) .shell{display:block;max-width:none;padding:18px clamp(18px,2.8vw,40px) 0}
  .b3.b3.b3-hero .b3-hhead{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 18px;margin:0 0 14px}
  .b3.b3.b3-hero .b3-hhead .fq-eyebrow{width:100%;margin:0}
  .b3.b3.b3-hero .b3-hhead .intro-title{font-size:clamp(30px,2.6vw,40px);margin:0}
  .b3.b3.b3-hero .b3-hhead .intro-sub{margin:0;font-size:15px;color:var(--ink2)}
  .b3.b3.b3-hero:not(.b3-col) .qr{position:relative;top:auto;width:100%;height:calc(100vh - var(--b3nav) - 200px);min-height:500px}
  .b3.b3.b3-hero .b3-hdown{display:grid;place-items:center;margin:14px auto 6px;width:54px;height:54px;border:0;background:none;cursor:pointer;color:var(--ink);font:300 46px/1 Barlow,system-ui,sans-serif;animation:b3bob 1.8s ease-in-out infinite}
  .b3.b3.b3-hero .b3-hdown span{display:block;transform:rotate(90deg)}
  .b3.b3.b3-hero:not(.b3-col) .ql{max-width:720px;margin:10px auto 0}
  .b3.b3.b3-hero #b2-intro{display:none}
  .b3.b3.b3-hero .b3-dp-img{max-width:190px}
  /* first click: the board slides over to the right, questions slide in from the left */
  .b3.b3.b3-enter:not(.b3-col) .qr{animation:b3boardin .65s cubic-bezier(.22,.8,.24,1) both}
  .b3.b3.b3-enter:not(.b3-col) .ql{animation:b3feedin .65s cubic-bezier(.22,.8,.24,1) .08s both}
}
@keyframes b3boardin{0%{transform:translateX(-55%) scale(1.04);opacity:.6}100%{transform:none;opacity:1}}
@keyframes b3feedin{0%{transform:translateX(-40px);opacity:0}100%{transform:none;opacity:1}}
@media(max-width:860px){
  .b3.b3.b3-hero .b3-hcalc{right:6px;bottom:8px;width:88px}
  .b3.b3.b3-hero .b3-hnote{right:92px;bottom:2px;font-size:17px;flex-direction:row;align-items:flex-end;gap:2px}
  .b3.b3.b3-hero .b3-hnote span{margin:0 0 18px}
  .b3.b3.b3-hero .b3-hnote img{width:40px;margin:0}
  .b3.b3.b3-hero .b3-dp-img{max-width:70px}
  .b3.b3.b3-hero .b3-demo .pin{zoom:.7}
  .b3.b3 .b3-empty3 .qr-empty-ttl{font-size:18px}
  .b3.b3 .b3-empty3 .qr-empty-main{font-size:16px}
  .b3.b3 .b3-empty3 .qr-empty-sub{font-size:11px;letter-spacing:0.08em}
  .b3.b3 .b3-hempty{top:38%;width:min(330px,74%)}
}
@media (prefers-reduced-motion:reduce){
  .b3.b3 .b3-demo{display:none}
  .b3.b3 .b3-hempty,.b3.b3 .b3-hnote,.b3.b3 .b3-hcalc,.b3.b3 .b3-hdown,.b3.b3.b3-enter .qr,.b3.b3.b3-enter .ql{animation:none!important;opacity:1}
}

/* ===== Oct 18 (8:59 PM) board: title in the header bar, sticky note, bigger plus + calculator ===== */
.b3.b3 .qr-bar{position:relative}
.b3.b3 .qr-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:400 clamp(17px,1.5vw,24px)/1.1 var(--serif);color:var(--ink);white-space:nowrap;max-width:46%;overflow:hidden;text-overflow:ellipsis;text-align:center;pointer-events:none}
.b3.b3 .b3-sticky{position:absolute;left:4%;top:20px;z-index:4;width:clamp(150px,13vw,190px);aspect-ratio:1;box-sizing:border-box;padding:18px 16px;display:flex;align-items:center;justify-content:center;text-align:center;
  background:#fbe98e;color:#4f4f4f;font:400 clamp(19px,1.6vw,24px)/1.12 'Akaya Telivigala',cursive;transform:rotate(-4deg);box-shadow:0 10px 18px -8px rgba(0,0,0,.28),0 2px 4px rgba(0,0,0,.08)}
.b3.b3 .b3-hsticky{animation:b3stickypop .5s cubic-bezier(.34,1.56,.64,1) var(--de,0s) both}
@keyframes b3stickypop{0%{opacity:0;transform:rotate(-10deg) scale(.6)}100%{opacity:1;transform:rotate(-4deg) scale(1)}}
.b3.b3 .b3-empty3 .qr-empty-circle{width:110px;height:110px;font-size:64px;font-weight:300;border-width:2px;margin:0 auto 18px}
/* calculator ~2x */
.b3.b3 .qr:has(.b3-hcalc){--cw:clamp(280px,25vw,380px)}
.b3.b3 .b3-hcalc{width:var(--cw);right:-48px;bottom:4%}
.b3.b3 .b3-hnote{right:calc(var(--cw) - 70px);bottom:calc(4% + var(--cw) * 1.08)}
@keyframes b3hover{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(-1.5deg)}}
.b3.b3 .b3-hcalc{animation:b3hover 4s ease-in-out infinite}
@media(min-width:861px){
  .b3.b3.b3-hero:not(.b3-col) .qr{height:calc(100vh - var(--b3nav) - 110px);min-height:560px}
  .b3.b3.b3-hero:not(.b3-col) .shell{padding-top:22px}
}
@media(max-width:860px){
  .b3.b3 .qr-title{font-size:16px;max-width:40%}
  .b3.b3 .qr-live-txt{white-space:nowrap}
  .b3.b3 .b3-sticky{width:112px;padding:10px;font-size:16px;top:12px;left:12px}
  .b3.b3 .b3-empty3 .qr-empty-circle{width:72px;height:72px;font-size:42px;margin-bottom:10px}
  .b3.b3.b3-hero .qr:has(.b3-hcalc){--cw:150px}
  .b3.b3.b3-hero .b3-hcalc{width:var(--cw);right:2px;bottom:-34px}
  .b3.b3.b3-hero .b3-hnote{right:calc(var(--cw) - 4px);bottom:4px}
  .b3.b3 .b3-hempty{top:56%;left:42%;width:min(250px,62%)}
}
@media (prefers-reduced-motion:reduce){.b3.b3 .b3-hsticky{animation:none!important}}
/* header bar: count stacks under the label so the centred title never collides */
.b3.b3 .qr-live{flex-wrap:wrap;max-width:28%;row-gap:2px}
.b3.b3 .qr-live .qr-count{margin-left:13px;flex-basis:100%}
.b3.b3:not(.b3-hero) .qr-title{font-size:clamp(16px,1.3vw,20px)}
/* working layout, empty board: sticky top-left, copy below it */
.b3.b3:not(.b3-hero) .b3-sticky{width:140px;padding:12px;font-size:19px;top:16px;left:16px}
.b3.b3:not(.b3-hero) .b3-sticky + .b3-empty3{padding-top:190px}
@media(max-width:860px){
  .b3.b3 .qr-title{font-size:15px}
  .b3.b3 .b3-sticky,.b3.b3:not(.b3-hero) .b3-sticky{width:96px;padding:8px;font-size:14px;top:12px;left:12px}
  .b3.b3:not(.b3-hero) .b3-sticky + .b3-empty3{padding:26px 14px 0 124px}
  .b3.b3 .b3-empty3 .qr-empty-circle{width:60px;height:60px;font-size:36px}
  .b3.b3 .b3-hempty{top:64%;left:33%;width:52%}
  .b3.b3.b3-hero .b3-hnote{right:10px;bottom:calc(var(--cw) * 1.29 - 30px);flex-direction:column;align-items:flex-end}
  .b3.b3.b3-hero .b3-hnote span{margin:0}
  .b3.b3.b3-hero .b3-hnote img{width:34px;margin:0 30px 0 0}
}

/* ===== Oct 18 (9:02 PM) order board desktop landing 'rink': her hockey scene left, vision board right ===== */
.b3.b3 .b3-rinkp{display:none}
@media(min-width:861px){
  .b3.b3.b3-rink:not(.b3-col) .shell{display:grid;grid-template-columns:minmax(0,1fr) clamp(440px,36vw,580px);column-gap:clamp(20px,2.2vw,32px);padding:22px clamp(18px,2.8vw,40px) 0;align-items:start}
  .b3.b3.b3-rink .b3-rinkp{display:block;grid-column:1;grid-row:1;height:calc(100vh - var(--b3nav) - 48px);min-height:520px;transform-origin:0 50%;transition:transform .6s cubic-bezier(.6,0,.4,1),opacity .5s ease,filter .5s}
  .b3.b3.b3-rink .b3-rinkp.out{transform:scale(.2);opacity:0;filter:blur(2px)}
  .b3.b3.b3-rink .b3-rinkbox{position:relative;width:100%;height:100%;overflow:hidden;border-radius:16px;background:#000;box-shadow:0 14px 34px -18px rgba(0,0,0,.4)}
  .b3.b3.b3-rink .b3-rinkbox iframe{position:absolute;left:50%;top:50%;width:1280px;height:760px;border:0;transform-origin:50% 50%;transform:translate(-50%,-50%) scale(.6)}
  .b3.b3.b3-rink:not(.b3-col) .qr{grid-column:2;grid-row:1;position:sticky;top:calc(var(--b3nav) + 22px);width:auto;height:calc(100vh - var(--b3nav) - 48px);min-height:520px}
  .b3.b3.b3-rink .ql,.b3.b3.b3-rink .b3-hdown,.b3.b3.b3-rink .b3-hhead{display:none}
  .b3.b3.b3-rink .qr:has(.b3-hcalc){--cw:clamp(220px,17vw,290px)}
  .b3.b3.b3-rink .b3-hcalc{right:-44px;bottom:3%}
  .b3.b3.b3-rink .b3-sticky{width:clamp(140px,11vw,170px);font-size:clamp(18px,1.4vw,22px)}
  .b3.b3.b3-rink .b3-hempty{top:46%;left:44%;width:80%}
  .b3.b3.b3-rink .b3-dp-img{max-width:120px}
  .b3.b3.b3-rink .b3-demo .pin{zoom:.8}
}

/* ===== Oct 18 (9:02 PM) "What would you like to customize?": no panel, stickers float on the page ===== */
.b3.b3.b3 #b2-piece{background:none;box-shadow:none;border:0}
.b3.b3.b3 #b2-piece .pinboard{background:none;padding:12px 0 6px;margin:0;border:0;box-shadow:none}
.b3.b3 #b2-piece .stk:nth-child(6n+1){transform:rotate(-5deg)}
.b3.b3 #b2-piece .stk:nth-child(6n+2){transform:rotate(3.5deg) translateY(6px)}
.b3.b3 #b2-piece .stk:nth-child(6n+3){transform:rotate(-2.5deg)}
.b3.b3 #b2-piece .stk:nth-child(6n+4){transform:rotate(4deg) translateY(-4px)}
.b3.b3 #b2-piece .stk:nth-child(6n+5){transform:rotate(-3.5deg) translateY(5px)}
.b3.b3 #b2-piece .stk:nth-child(6n){transform:rotate(2.5deg)}
.b3.b3 #b2-piece .stk:hover,.b3.b3 #b2-piece .stk.on{transform:scale(1.08) rotate(0deg)}

/* ===== Oct 18 (9:04 PM) arrow calculator -> plus; rink container entrance ===== */
.b3.b3 .b3-harrow{position:absolute;z-index:8;pointer-events:none;height:auto;width:clamp(90px,8vw,130px);right:calc(var(--cw) - 10px);bottom:calc(4% + var(--cw) * 0.95);
  transform:scaleY(-1) rotate(8deg);transform-origin:50% 50%;animation:b3arrowpop .5s cubic-bezier(.34,1.56,.64,1) var(--dn,3.5s) both}
@keyframes b3arrowpop{0%{opacity:0;scale:.4}100%{opacity:1;scale:1}}
@media(min-width:861px){
  .b3.b3.b3-rink .b3-rinkp:not(.out){animation:b3rinkin .7s cubic-bezier(.22,.8,.24,1) both}
  .b3.b3.b3-rink .b3-hempty{top:38%;left:46%;width:58%}
  .b3.b3.b3-hero:not(.b3-rink) .b3-harrow{width:calc(var(--cw) * .6);right:calc(var(--cw) - 13px);bottom:calc(23px + var(--cw) * .59);transform:rotate(40deg)}   /* full-width board: calculator (right) -> plus (centre), almost level */
  .b3.b3.b3-rink .b3-harrow{width:clamp(90px,7.6vw,112px);right:calc(var(--cw) - 111px);bottom:calc(3% + var(--cw) * 1.0 + 89px)}
}
@keyframes b3rinkin{0%{opacity:0;transform:translateX(-24px) scale(.97)}100%{opacity:1;transform:none}}
@media(max-width:860px){
  .b3.b3.b3-hero .b3-harrow{width:62px!important;max-width:none;right:calc(var(--cw) - 2px);bottom:calc(var(--cw) * 1.29 - 96px)}
}
@media (prefers-reduced-motion:reduce){.b3.b3 .b3-harrow,.b3.b3.b3-rink .b3-rinkp{animation:none!important}}

/* Mini & Me women's: size picks under "Sounds good, add" */
.mm-addsz{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.mm-sizes{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.mm-szl{font:600 11px/1 var(--sans);color:#777;margin-right:2px}
.mm-sz{min-width:34px;height:28px;padding:0 8px;border:1.5px solid #cfc8bc;border-radius:7px;background:#fff;font:700 12px/1 var(--sans);color:#222;cursor:pointer}
.mm-sz:hover{border-color:#111}.mm-sz.on{background:#111;border-color:#111;color:#fff}
.mm-sizes.need .mm-sz{border-color:#d9534f}
.mm-addsz .btn.shake{animation:mmShake .45s}
.mm-sizes.shake .mm-sz{animation:mmJig .5s}.mm-sizes.shake .mm-sz:nth-child(odd){animation-delay:.05s}
@keyframes mmShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes mmJig{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(-8deg) translateY(-3px)}50%{transform:rotate(7deg)}75%{transform:rotate(-4deg) translateY(-1px)}}
@media (prefers-reduced-motion:reduce){.mm-addsz .btn.shake,.mm-sizes.shake .mm-sz{animation:none}}

.klh-stk .stk2-x{opacity:1}
img.klh-arrow,img.klh-arrow-up{object-fit:contain}
.klh-stage:not(.klh-loop) .klh-mine{top:23%}
/* Jordi: the remove × sits on each item's LEFT shoulder */
.stk2 .stk2-x,.atb-stk .stk2-x,.bxsc-stk .stk2-x,.klh-stk .stk2-x{left:auto;right:17%;top:11%}
/* Jordi 9:14 PM: bigger women's-version thumbnail; tighter crop on the box in the Mini & Me panel */
.mm-look .mm-it.mm-w{grid-template-columns:150px 1fr}
.mm-look .mm-it.mm-w .mm-img img{width:150px;height:150px}
.mm-look-box{overflow:hidden}

@media (max-width:760px){.mm-look .mm-it.mm-w{grid-template-columns:110px 1fr}.mm-look .mm-it.mm-w .mm-img img{width:110px;height:110px}.mm-look-box .bx{transform:scale(1.25);margin:0}}
.mm-look-box .bxs .bxs-box{scale:1.6;transform-origin:50% 58%}
@media (max-width:760px){.mm-look-box .bxs .bxs-box{scale:1.4}}
.mm-look .mm-it.mm-w .mm-img,.mm-look .mm-it.mm-w .mm-img img{width:150px!important;height:150px!important;max-width:none}

/* ===== Oct 18 (9:19 PM) /how-to: Jordi's hockey scene full width on white, crowd touching the nav ===== */
body.ht-page, body.ht-page main{background:#fff}
.ht{background:#fff;margin:0;padding:0}
.ht-box{position:relative;width:100%;overflow:hidden;background:#fff;line-height:0}
/* clip = the crowd's outline in scene pixels (1280x760 page; crowd stands y 17..744, corner radius ~140), so the scene's black page bg never shows */
.ht-box iframe{position:absolute;left:0;top:0;width:1280px;height:760px;border:0;background:#fff;transform-origin:0 0;clip-path:inset(18px -10px 17px -10px round 150px)}

/* Jordi 9:20 PM: 'click your items' note hidden (SEED.kidsLab.mineNote = true brings it back); her arrow from the box down to the Mini & Me starburst */
.klh-mm-arrow{position:absolute;left:44%;top:53%;width:clamp(60px,7vw,110px);height:auto;transform:rotate(38deg);pointer-events:none;z-index:4}
@media (max-width:1000px){.klh-mm-arrow{display:none}}
/* Oct 18 (9:20 PM) Jordi: nav links a touch more open (.14em -> .18em), desktop nav + mobile menu; About keeps its own Fredoka style */
body.navf-picked .hdr .nav > a:not(.u-about):not(.zz-a):not(.zz-b),body.navf-picked .hdr .nav > div > a:not(.u-about):not(.zz-a):not(.zz-b),
body.navf-picked .menu > a:not([href="/about"]):not(.zz-a):not(.zz-b){letter-spacing:.18em!important}

/* Jordi 9:22 PM: 'Need it personalized?' note sits halfway between the hanging piece and Make it mine, arrow (her raster) pointing at the button */
@media (min-width:1001px){
  .mm-row{position:relative}
  .mm-note{position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%) rotate(-3deg);flex-direction:row;align-items:center;gap:6px;z-index:3}
  .mm-note .hand{text-align:right}
  .mm-note-arr{width:54px;height:auto;flex:none}
}
@media (max-width:1000px){.mm-note-arr{width:40px;height:auto;transform:scaleX(-1)}}
/* a visible Back button on every page */
.hdr .backbtn{width:auto;gap:2px;padding:0 6px;grid-auto-flow:column}
.hdr .backbtn .backlbl{font:600 11px/1 'Barlow Condensed',var(--sans);letter-spacing:.12em;text-transform:uppercase}
@media (max-width:900px){.hdr .backbtn .backlbl{display:none}}

/* Jordi 9:23 PM: closer-look on the rack, fast and smooth (no bounce, no re-render snap) */
.pv-g{transition:transform .32s cubic-bezier(.22,.8,.3,1),opacity .28s ease,filter .28s ease;will-change:transform}
.pv-pair.has-fwd .pv-g{animation:none}
.pv-hint,.pv-stage .pv-hint{transition:margin-top .32s cubic-bezier(.22,.8,.3,1)}

/* ===== Oct 18 (9:28 PM) Custom dropdown + /the-process, /customize, /work-with-me placeholders ===== */
.tp{background:var(--bg,#f7f5f1);min-height:calc(100vh - 64px - 160px);display:flex;align-items:center;justify-content:center;text-align:center;padding:72px 20px}
.tp .wrap{display:flex;flex-direction:column;align-items:center;gap:34px}
.tp-h{font:500 clamp(32px,4.4vw,56px)/1.1 var(--serif);color:var(--ink);margin:0;letter-spacing:-.01em}
.cz-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.cz-pill{display:inline-flex;align-items:center;justify-content:center;min-width:250px;padding:22px 38px;border-radius:999px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);
  font:500 17px/1 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:background .2s,color .2s,transform .2s}
.cz-pill:hover,.cz-pill:focus-visible{background:var(--ink);color:#fff;transform:translateY(-2px)}
@media(max-width:760px){.tp{padding:56px 18px;min-height:60vh}.cz-pills{flex-direction:column;width:100%;max-width:340px}.cz-pill{min-width:0;width:100%;padding:20px 22px;font-size:16px}}
/* desktop Custom dropdown: same box as the Shop dropdown, plain links (no coloured underline) */
.nav .dd-cust .dd-side a.u-cust{border:0!important;border-bottom:1.5px solid transparent!important}
.nav .dd-cust .dd-side a.u-cust:hover,.nav .dd-cust .dd-side a.u-cust.on{border-bottom-color:var(--ink)!important}
/* mobile menu Custom row: a button that expands its three links */
.menu .mcust{display:flex;align-items:center}
.menu .mcust .mcust-chev{margin-left:auto;font:400 20px/1 var(--mono);color:var(--mute);padding-right:4px}
.menu .mcust-list[hidden]{display:none!important}
body.navf-picked .menu > button.mcust:not(.zz-a):not(.zz-b){letter-spacing:.18em!important}

/* ===== Oct 18 (9:29 PM) /custom: Jordi's old-site "Here's how I work" (incoming/oldsite-ref/how-i-work-03.png) ===== */
body:has(.hiw) , body:has(.hiw) main{background:#faf9f7}
.hiw{background:#faf9f7;color:#141414;padding:clamp(40px,5.4vw,78px) 0 clamp(48px,5vw,72px)}
.hiw-in{max-width:1400px;margin:0 auto;padding:0 clamp(18px,1.5vw,22px)}
.hiw-top{position:relative;display:grid;grid-template-columns:auto 1fr minmax(0,640px);grid-template-rows:auto auto;column-gap:clamp(24px,2.6vw,38px);align-items:start}
.hiw-num{grid-row:1/3;display:flex;align-items:center;gap:clamp(12px,1.2vw,18px);padding-top:0;margin-top:clamp(-44px,-3vw,-22px)}
.hiw-rule{display:block;width:clamp(18px,1.8vw,26px);height:1px;background:#cfccc6}
.hiw-num span{font:500 clamp(120px,15vw,212px)/.78 'Playfair Display',Georgia,serif;letter-spacing:-.02em;color:#121212}
.hiw-head{grid-column:2;padding-top:0}
.hiw-k{font:500 10px/1 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#8d8a84;margin-bottom:clamp(14px,1.4vw,20px)}
.hiw-h{margin:0;font:800 clamp(34px,3.55vw,50px)/1 'Playfair Display',Georgia,serif;letter-spacing:-.025em;text-transform:uppercase;color:#87847d}
.hiw-h i{font-style:italic}
.hiw-note{position:absolute;right:-6px;top:clamp(12px,1.3vw,20px);width:clamp(170px,15vw,215px);height:auto}
.hiw-intro{grid-column:3;grid-row:2;align-self:start;margin:clamp(14px,1.4vw,20px) 0 0;font:400 clamp(15px,1.24vw,17.5px)/2 Barlow,system-ui,sans-serif;color:#3b3b3b}
.hiw-cols{list-style:none;margin:clamp(44px,4.3vw,62px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #e3e0da}
.hiw-cols li{padding:clamp(26px,2.4vw,34px) clamp(20px,1.8vw,26px) clamp(30px,3vw,44px);border-left:1px solid #e3e0da;min-height:clamp(160px,15vw,220px)}
.hiw-cols li:first-child{border-left:0}
.hiw-n{display:block;font:400 9.5px/1 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:.2em;color:#8d8a84;margin-bottom:clamp(18px,1.8vw,24px)}
.hiw-cols h3{margin:0 0 clamp(12px,1.1vw,16px);font:700 clamp(18px,1.48vw,21px)/1.15 'Playfair Display',Georgia,serif;letter-spacing:-.01em;color:#121212}
.hiw-cols h3 i{font-style:italic}
.hiw-cols p{margin:0;font:400 clamp(13.5px,1.06vw,15px)/1.75 Barlow,system-ui,sans-serif;color:#5d5d5d;max-width:280px}
.hiw-links{display:flex;justify-content:center;gap:clamp(36px,5vw,72px);margin-top:clamp(34px,3.4vw,48px);padding-top:clamp(26px,2.4vw,34px);border-top:1px solid #e3e0da}
.hiw-links a{display:inline-flex;align-items:center;gap:14px;font:600 11px/1 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#141414;text-decoration:none;padding:8px 0}
.hiw-links a i{display:block;width:38px;height:1px;background:#141414;transition:width .25s}
.hiw-links a:hover i{width:56px}
@media(max-width:760px){
  .hiw-top{display:block;min-height:0}
  .hiw-num{padding-top:0}.hiw-num span{font-size:118px}
  .hiw-head{padding-top:22px}.hiw-h{font-size:36px}
  .hiw-note{position:relative;right:auto;top:auto;display:block;width:200px;margin:22px 0 0 auto}
  .hiw-intro{margin:22px 0 0;line-height:1.85}
  .hiw-cols{grid-template-columns:1fr;margin-top:30px}
  .hiw-cols li{border-left:0;border-top:1px solid #e3e0da;min-height:0;padding:22px 2px 24px}
  .hiw-cols li:first-child{border-top:0}
  .hiw-links{flex-direction:column;align-items:flex-start;gap:6px}
}
/* /request: "Ways to get it made" strip; folds (height + opacity) on the first board interaction while the board slides up */
.ways{display:grid;grid-template-rows:1fr;opacity:1;background:#faf9f7;border-bottom:1px solid #e3e0da}
.ways-in{overflow:hidden;min-height:0}
.ways-row{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);max-width:1400px;margin:0 auto;padding:14px clamp(18px,2.8vw,40px)}
.ways-k{flex:none;font:600 10.5px/1.2 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#8d8a84}
.ways ol{list-style:none;margin:0;padding:0;display:flex;flex:1;justify-content:space-between;gap:clamp(14px,2vw,30px)}
.ways li{font:600 clamp(14px,1.15vw,16.5px)/1.2 'Playfair Display',Georgia,serif;color:#141414;white-space:nowrap}
.ways li span{font:400 9.5px/1 'Barlow Condensed',sans-serif;letter-spacing:.2em;color:#8d8a84;margin-right:9px;vertical-align:2px}
.ways.going{animation:waysfold .7s cubic-bezier(.6,0,.3,1) both;pointer-events:none}
@keyframes waysfold{0%{grid-template-rows:1fr;opacity:1;border-bottom-color:#e3e0da}60%{opacity:0}100%{grid-template-rows:0fr;opacity:0;border-bottom-color:transparent;border-bottom-width:0}}
@media(max-width:760px){.ways-row{flex-direction:column;align-items:flex-start;gap:10px;padding:12px 18px}
  .ways ol{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;width:100%}.ways li{font-size:14px;white-space:normal}}
@media (prefers-reduced-motion:reduce){.ways.going{animation-duration:.01s}}

/* ===== Oct 18 (9:32 PM) order board question headings, old-site style (SEED.orderBoard.oldSiteHeads) ===== */
.b3.b3 .fcard.oq{background:transparent;border:0;box-shadow:none;padding-left:0;padding-right:0}
.b3.b3 .oq-head{display:flex;align-items:flex-start;gap:clamp(14px,1.6vw,22px);margin-bottom:12px}
.b3.b3 .oq-num{flex:none;display:flex;align-items:center;gap:10px;margin-top:-2px}
.b3.b3 .oq-num i{display:block;width:18px;height:1px;background:#cfccc6}
.b3.b3 .oq-num span{font:500 clamp(46px,4.2vw,64px)/.9 'Playfair Display',Georgia,serif;letter-spacing:-.02em;color:var(--oq)}
.b3.b3 .oq-txt{min-width:0;padding-top:2px}
.b3.b3 .oq-k{font:500 10px/1 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#8d8a84;margin-bottom:9px}
.b3.b3 .fcard.oq .fq-title.oq-q{font:600 clamp(24px,2.4vw,34px)/1.08 'Playfair Display',Georgia,serif;letter-spacing:-.015em;color:#141414;margin:0}
.b3.b3 .fcard.oq .fq-title.oq-q i{font-style:italic}
.b3.b3 .fcard.oq .oq-txt .fq-hint{margin:8px 0 0}
.b3.b3 .fcard.oq.done .fq-title.oq-q{font-size:20px}
.b3.b3 .fcard.oq.done .oq-num span{font-size:36px}
@media(max-width:760px){.b3.b3 .oq-num span{font-size:44px}.b3.b3 .oq-num i{width:12px}.b3.b3 .fcard.oq .fq-title.oq-q{font-size:24px}}
/* hover nav dropdowns close on their own: no Back button overlapping the first link */
.nav .dd-in > .pbk{display:none}

/* ===== Oct 18 (9:25 PM) product-page mascot (Penny): bubble = the contact form's speech bubble (grey, 16/16/16/5 radius) ===== */
.pv-masc{display:flex;align-items:flex-end;gap:12px;pointer-events:none}
.pv-masc-i{display:flex;align-items:flex-end;flex:none}
.pv-masc-i img{display:block;width:auto;height:116px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.14))}
.pv-masc.two .pv-masc-i img{height:100px}.pv-masc.two .pv-masc-i img + img{margin-left:-18px}
.pv-masc-b{display:inline-block;max-width:210px;background:#ececee;border-radius:16px 16px 16px 5px;padding:10px 13px;font:400 13.5px/1.45 Barlow,system-ui,sans-serif;color:#222;margin-bottom:62px}
/* under Make it mine: mascot left, bubble to her right (tail corner points at her) */
.pv-masc.at-mine{margin:16px 0 6px;animation:pvmascin .5s cubic-bezier(.34,1.56,.64,1) .2s both}
.pv-masc.at-mine .pv-masc-i{order:-1}
@keyframes pvmascin{0%{opacity:0;transform:translateY(10px) scale(.92)}100%{opacity:1;transform:none}}
/* after add-to-box: she sits just right of the box, bubble above her */
.atb.has-masc{--mw:clamp(96px,8vw,124px)}
.atb.has-masc .pv-masc.at-box{position:absolute;left:calc(100% + 12px);bottom:calc(64px + 4%);flex-direction:column;align-items:flex-start;gap:6px;width:max-content}
.atb.has-masc .pv-masc.at-box .pv-masc-i img{height:var(--mw)}
.atb.has-masc .pv-masc.at-box .pv-masc-b{margin:0 0 0 18px;border-radius:16px 16px 16px 5px;white-space:nowrap}
@media(max-width:760px){
  .pv-masc-i img{height:84px}.pv-masc.two .pv-masc-i img{height:74px}
  .pv-masc-b{font-size:13px;max-width:190px;margin-bottom:44px}
  /* mobile: no room beside the box, so she tucks in a row right under it (never over the box or its stickers) */
  .atb.has-masc .pv-masc.at-box{position:static;flex-direction:row-reverse;justify-content:flex-start;align-items:flex-end;gap:10px;width:auto;margin:-6px 4px 6px auto;padding-right:2px}
  .atb.has-masc .pv-masc.at-box .pv-masc-i img{height:72px}
  .atb.has-masc .pv-masc.at-box .pv-masc-b{margin:0 0 36px;border-radius:16px 16px 16px 5px}
}
@media (prefers-reduced-motion:reduce){.pv-masc.at-mine{animation:none}}

/* ===== Oct 18 (9:58 PM) /custom = old-site "Three ways into the studio" layout (incoming/oldsite-ref/three-ways-01.png); u = 1/1024 of the reference width ===== */
body:has(.tw), body:has(.tw) main{background:#faf9f7}
.tw{--u:calc(min(100vw,1440px) / 1024);background:#faf9f7;color:#141414;padding:calc(var(--u) * 37) 0 calc(var(--u) * 46)}
.tw-in{width:calc(var(--u) * 990);margin:0 auto}
.tw-top{position:relative;height:calc(var(--u) * 184);padding-left:calc(var(--u) * 189)}
.tw-rule{position:absolute;left:0;top:calc(var(--u) * 61);width:calc(var(--u) * 18);height:1px;background:#d6d2cb}
.tw-big{position:absolute;left:calc(var(--u) * 26);top:calc(var(--u) * -42);font:500 calc(var(--u) * 150)/1 'Playfair Display',Georgia,serif;color:#121212;letter-spacing:-.02em}
.tw-head{padding-top:0}
.tw-k{font:500 calc(var(--u) * 9.5)/1 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:.26em;text-transform:uppercase;color:#8d8a84;margin-bottom:calc(var(--u) * 15)}
.tw-h{margin:0;font:800 calc(var(--u) * 35.5)/1.07 'Playfair Display',Georgia,serif;letter-spacing:-.025em;text-transform:uppercase;color:#89857f}
.tw-h i{font-style:italic}
.tw-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.tw-cards li{position:relative;border-top:calc(var(--u) * 3.4) solid var(--tc);border-left:1px solid #e3e0da;padding:calc(var(--u) * 32) calc(var(--u) * 26) calc(var(--u) * 40) calc(var(--u) * 33);min-height:calc(var(--u) * 290)}
.tw-cards li:first-child{border-left:0}
.tw-n{display:block;font:600 calc(var(--u) * 47)/1 'Playfair Display',Georgia,serif;color:var(--tc);letter-spacing:-.01em;margin-bottom:calc(var(--u) * 27)}
.tw-cards h3{margin:0 0 calc(var(--u) * 16);font:700 calc(var(--u) * 19)/1.15 'Playfair Display',Georgia,serif;letter-spacing:-.01em;color:#121212}
.tw-cards h3 i{font-style:italic}
.tw-cards p{margin:0;font:400 calc(var(--u) * 11.6)/1.72 Barlow,system-ui,sans-serif;color:#5d5d5d}
.tw-links{display:flex;justify-content:center;gap:calc(var(--u) * 60);padding-top:calc(var(--u) * 30)}
.tw-links a{display:inline-flex;align-items:center;gap:calc(var(--u) * 14);font:600 max(10px,calc(var(--u) * 8.6))/1 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#141414;text-decoration:none;padding:8px 0}
.tw-links a i{display:block;width:calc(var(--u) * 30);height:1px;background:#141414;transition:width .25s}
.tw-links a:hover i{width:calc(var(--u) * 46)}
@media(max-width:760px){
  .tw{--u:1px;padding:34px 0 40px}.tw-in{width:auto;padding:0 20px}
  .tw-top{height:auto;padding-left:0;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:start;margin-bottom:28px}
  .tw-rule{display:none}
  .tw-big{position:static;font-size:104px;line-height:.82;grid-row:1}
  .tw-k{font-size:9.5px;margin-bottom:10px}.tw-h{font-size:27px}
  .tw-cards{grid-template-columns:1fr}
  .tw-cards li{border-left:0;padding:24px 4px 26px;min-height:0}
  .tw-cards li + li{margin-top:6px}
  .tw-n{font-size:40px;margin-bottom:14px}.tw-cards h3{font-size:20px;margin-bottom:10px}.tw-cards p{font-size:14.5px}
  .tw-links{flex-direction:column;align-items:flex-start;gap:4px;padding-top:18px}.tw-links a{font-size:11px}.tw-links a i{width:32px}
}
/* /shop "Want something customized?" banner: the /custom three-ways layout, shorter */
.tw.tw-shop{padding-bottom:calc(var(--u) * 26)}
.tw-shop .tw-top{height:calc(var(--u) * 150)}
.tw-shop .tw-head{padding-top:calc(var(--u) * 24)}
.tw-shop .tw-cards li{min-height:calc(var(--u) * 170);padding-bottom:calc(var(--u) * 26)}
@media(max-width:760px){.tw-shop .tw-top{height:auto}.tw-shop .tw-head{padding-top:10px}.tw-shop .tw-cards{grid-template-columns:1fr 1fr}.tw-shop .tw-cards li{min-height:0;padding:18px 10px 18px 2px}.tw-shop .tw-cards li:nth-child(2n){border-left:1px solid #e3e0da;padding-left:12px}.tw-shop .tw-n{font-size:32px;margin-bottom:10px}.tw-shop .tw-cards h3{font-size:17px}.tw-shop .tw-cards p{font-size:13.5px}}
/* Oct 18 (10:01 PM) pen note = raster in Jordi's Photoshop pen (tools/render-pen-note.py); placed by pvPenFit() on desktop */
.mm-pen{display:block;pointer-events:none}
.mm-pen img{display:block;width:100%;height:auto}
@media(max-width:1000px){.mm-pen{position:static;width:min(210px,62%);margin:12px 0 0 auto;transform:none}}
/* Oct 18 (10:10 PM) Make it mine: required fields (shake), base colour + garment sticker chips, Jordi's pen-voice note */
.mim-req .req{color:#d9534f;font-weight:700}
.mim-req.need input{border-color:#d9534f;background:#fff7f6}
.mim-req.need>span{color:#c0392b}
.mim-req.shake{animation:mmShake .45s cubic-bezier(.36,.07,.19,.97)}
.mm-add.shake,.lm .btn.shake{animation:mmShake .45s}
.mim-chips{display:flex;flex-wrap:wrap;gap:10px 9px;padding:4px 2px 2px}
.mim-chip{--r:0deg;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 13px 6px 8px;border:3px solid #fff;border-radius:999px;background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.06),0 4px 10px rgba(0,0,0,.14);font:700 13px/1.1 var(--sans);color:#222;cursor:pointer;transform:rotate(var(--r));transition:transform .18s,box-shadow .18s}
.mim-chip.mim-word{padding:6px 14px;background:#f6f3ec;border-color:#fff}
.mim-chip:hover{transform:rotate(0) translateY(-2px);box-shadow:0 2px 0 rgba(0,0,0,.05),0 8px 16px rgba(0,0,0,.16)}
.mim-chip.on{background:#111;color:#fff;border-color:#fff;outline:2px solid #8fc3ea;outline-offset:1px;transform:rotate(0) scale(1.04)}
.mim-chip:focus-visible{outline:2px solid #2d4f9e;outline-offset:2px}
.mim-sw{width:20px;height:20px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18)}
.mim-more{margin-top:10px}
.mim-garnew textarea{width:100%}
.mim-voice{margin:6px 0 0;color:#2d4f9e;font-size:19px;transform:rotate(-1.5deg);transform-origin:left}
.mim-opt{font:500 11px/1 var(--sans);color:#888;margin-left:4px;text-transform:none;letter-spacing:0}
@media (prefers-reduced-motion:reduce){.mim-chip,.mim-chip:hover{transform:none;transition:none}.mim-req.shake{animation:none}}
.mim-chip.on .mim-sw{box-shadow:0 0 0 2px #fff}
/* Oct 18 (10:16 PM) Make it mine: Jordi's base colour checkbox / "Please use…" box + garment same/different checkboxes (no chips) */
.mim-chk{display:flex;align-items:center;gap:9px;margin:8px 0 0;font:500 14px/1.35 var(--sans);color:#222;text-transform:none;letter-spacing:0;cursor:pointer}
.mim-chk input{width:18px;height:18px;flex:none;margin:0;accent-color:#111;cursor:pointer}
.mim-q>.mim-chk span{font:inherit;color:inherit;letter-spacing:0;text-transform:none}
.mim-q input.mim-more::placeholder{color:#9a9a9a}
.mim-gp{margin:6px 0 2px;font:400 13.5px/1.5 var(--sans);color:#555;max-width:46ch}
.mim-reqc.need input.mim-more{border-color:#d9534f;background:#fff7f6}
.mim-reqc.need>span{color:#c0392b}
.mim-reqc.need .mim-chk{color:#c0392b}
.mim-reqc.shake{animation:mmShake .45s cubic-bezier(.36,.07,.19,.97)}
@media (prefers-reduced-motion:reduce){.mim-reqc.shake{animation:none}}
.field .mim-or,.mim-or{display:block;margin:8px 0 2px;font:italic 400 13px/1 var(--sans);color:#777;text-transform:none;letter-spacing:0}
.field .mim-chk input[type=checkbox]{-webkit-appearance:checkbox;appearance:auto;width:18px;height:18px;min-height:0;padding:0;margin:0;border:0;background:none;box-shadow:none;flex:none;accent-color:#111}
/* Oct 18 (10:25 PM) Penny's intro: ~2x, floating off to the right like an interactive sticker (idle bob, hover wiggle), bubble to her left.
   After-add (.at-box) is untouched. With the Make it mine form open she sits right-aligned under the form instead of over it. */
.pv-masc.at-mine{position:relative;display:block;height:var(--pmh,150px);margin:6px 0 4px;animation:pvmascin .5s cubic-bezier(.34,1.56,.64,1) .2s both}
.pv-masc.at-mine .pv-masc-i{position:absolute;right:0;bottom:6px;pointer-events:auto;cursor:grab;animation:pvBob 3.4s ease-in-out infinite}
.pv-masc.at-mine .pv-masc-i img{height:232px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.16));transform-origin:50% 90%;transition:transform .2s}
.pv-masc.at-mine.two .pv-masc-i img{height:196px}.pv-masc.at-mine.two .pv-masc-i img + img{margin-left:-34px}
.pv-masc.at-mine .pv-masc-i:hover img{animation:pvWiggle .7s ease-in-out}
.pv-masc.at-mine .pv-masc-i:hover img + img{animation-delay:.08s}
.pv-masc.at-mine .pv-masc-b{position:absolute;right:calc(var(--pmw,222px) + 10px);bottom:96px;margin:0;max-width:220px;border-radius:16px 16px 5px 16px;white-space:normal}
.pv-masc.at-mine.two{--pmw:300px}
@keyframes pvBob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-7px) rotate(1deg)}}
@keyframes pvWiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(2deg)}}
@media(min-width:1001px){.pv-masc.at-mine{--pmh:118px}.pv-masc.at-mine .pv-masc-i{bottom:-6px}}
.mm.open ~ .pv-masc.at-mine{--pmh:250px}
@media(max-width:760px){
  .pv-masc.at-mine{--pmh:168px;--pmw:150px}.pv-masc.at-mine.two{--pmw:210px}
  .pv-masc.at-mine .pv-masc-i img{height:156px}.pv-masc.at-mine.two .pv-masc-i img{height:136px}.pv-masc.at-mine.two .pv-masc-i img + img{margin-left:-26px}
  .pv-masc.at-mine .pv-masc-b{bottom:70px;max-width:min(190px,calc(100% - var(--pmw) - 10px));font-size:13px}
}
@media (prefers-reduced-motion:reduce){.pv-masc.at-mine .pv-masc-i,.pv-masc.at-mine .pv-masc-i:hover img{animation:none}}
@media(min-width:761px){.pv-masc.at-mine .pv-masc-b{top:44px;bottom:auto}}
/* Oct 19 1:04 PM Jordi's FINAL Penny spot (screenshots/penny-fix-1019/TARGET-from-jordi-1304.png), blueprint for EVERY baby-mascot piece page:
   anchored to Make it mine (not the column's right edge, which drifted with the window width): mascot box starts 279px right of the button's left edge
   and sits 14px higher on desktop; bubble stays 8px to her left. Narrow columns clamp so she never leaves the column. Phones unchanged. */
@media(min-width:761px){
  .pv-masc.at-mine{--pmiw:225px;--pl:min(279px,calc(100% - var(--pmiw)))}.pv-masc.at-mine.two{--pmiw:304px}
  .pv-masc.at-mine .pv-masc-i{left:var(--pl);right:auto}
  .pv-masc.at-mine .pv-masc-b{right:calc(100% - var(--pl) + 8px);max-width:min(220px,calc(var(--pl) - 8px))}
}
@media(min-width:1001px){.pv-masc.at-mine .pv-masc-i{bottom:8px}}
/* Oct 19 2:32 PM Jordi (TARGET2-from-jordi-1432-a/-b.png): Penny 15% smaller (232→197px, duo 196→167px), left edge kept where it was (so she reads further left),
   top ~12px lower (overlapping the bottom of the 'In your box' bar); bubble still 8px to her left. Phone: same 15% (156→133px, duo 136→116px). Blueprint for every baby mascot. */
@media(min-width:761px){
  .pv-masc.at-mine{--pmiw:191px}.pv-masc.at-mine.two{--pmiw:258px}
  .pv-masc.at-mine .pv-masc-i img{height:197px}.pv-masc.at-mine.two .pv-masc-i img{height:167px}.pv-masc.at-mine.two .pv-masc-i img + img{margin-left:-29px}
}
@media(min-width:1001px){.pv-masc.at-mine .pv-masc-i{bottom:31px}}
@media(max-width:760px){
  .pv-masc.at-mine{--pmw:128px}.pv-masc.at-mine.two{--pmw:179px}
  .pv-masc.at-mine .pv-masc-i img{height:133px}.pv-masc.at-mine.two .pv-masc-i img{height:116px}.pv-masc.at-mine.two .pv-masc-i img + img{margin-left:-22px}
}
@media(max-width:760px){.mm-pen{display:none}}  /* full-width button on phones: her arrow would point at nothing */
/* "More from …" Polaroids stay in the gallery column on desktop, so the after-add box (right column) never sits over them */
@media(min-width:801px){.pgrid.pv-more{max-width:calc(52% - 20px);grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}}
.loginest{color:#2d4f9e;text-decoration:underline;text-underline-offset:3px;font-weight:600;cursor:pointer;white-space:nowrap}
.signins{width:100%;border-collapse:collapse;font:400 14px/1.4 var(--sans)}.signins th,.signins td{text-align:left;padding:9px 10px;border-bottom:1px solid #e6e1d8}.signins th{font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#777}
.pv-price .loginest{font:600 16px/1.2 var(--sans);letter-spacing:0}
.pv-wordart{margin:6px 0 10px;max-width:46ch;font:400 14px/1.5 var(--sans);color:#555}
.pv-th-tex img{object-fit:cover}
/* Oct 18 (11:20 PM) Penny before add: centred under Make it mine (head just in front of the button's bottom edge), die-cut bubble STICKER
   (raster public/assets/ui/bubble-sticker.png, tools/render-bubble.py) to her right, text in HTML. Positions set by pvMascFit(). */
.pv-masc.at-mine.pmstk{position:relative;display:block;height:var(--h,240px);margin:0 0 6px;animation:pvmascin .5s cubic-bezier(.34,1.56,.64,1) .2s both}
.pv-masc.at-mine.pmstk .pv-masc-i{position:absolute;left:var(--pl,0px);top:0;right:auto;bottom:auto;pointer-events:none;z-index:4}
.pv-masc.at-mine.pmstk.stk-above .pv-masc-i{top:auto;bottom:0}
.pv-masc-hit{position:absolute;left:12%;right:12%;top:24%;bottom:0;pointer-events:auto;cursor:grab}
.pv-masc-stk{position:absolute;left:var(--bl,240px);top:var(--bt,40px);width:var(--bw,300px);pointer-events:none;transform:rotate(-2deg);transform-origin:10% 80%;animation:pvStkIn .45s cubic-bezier(.34,1.56,.64,1) .45s both}
.pv-masc-stk img{display:block;width:100%;height:auto}
.pv-masc-stk-t{position:absolute;left:13%;right:6%;top:9%;bottom:22%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--fs,18px);line-height:1.25;color:#1f2a44}
.pv-masc.stk-above .pv-masc-stk{transform:rotate(-2deg) scaleX(1)}
@keyframes pvStkIn{0%{opacity:0;transform:rotate(-8deg) scale(.7)}100%{opacity:1;transform:rotate(-2deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.pv-masc-stk{animation:none}}
.pv-masc.at-mine.pmstk .pv-masc-i{display:flex;width:max-content}.pv-masc.at-mine.pmstk .pv-masc-i img{max-width:none;width:auto}
.mim-q input.mim-more::placeholder{color:#b3b3b3;opacity:1}
/* Signature Portraits sub-style dropdown (shop rail) */
.rail-ps-w{position:relative;display:inline-block}
.cdrop li a{display:block;text-align:left;border-radius:6px;padding:9px 10px;font:400 15px var(--sans);color:#333;text-decoration:none;white-space:nowrap}
.cdrop li a:hover,.cdrop li a.on{background:#f1efe9;color:var(--ink)}
.cdrop li a.none{color:#b5b5b5;cursor:default;background:none}
.rail-cdrop li a{padding:8px 14px;font:500 13px/1.2 Barlow,var(--sans,sans-serif);border-radius:0;color:var(--ink,#1d1c1a)}
/* Signature Portraits by style (Jordi's cloud layout, Oct 18 11:36 PM): left style list + one row per style, text card among the tiles; swaps in place like #catarea */
#psarea{transition:opacity .22s ease,transform .22s ease;min-width:0}
#psarea.out{opacity:0;transform:translateY(8px)}
.ps-side{list-style:none;margin:22px 0 18px;padding:0;display:flex;flex-direction:column;gap:12px;max-width:260px}
.ps-side button{all:unset;cursor:pointer;display:block;width:100%;font:500 13px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding-bottom:5px;border-bottom:1.5px solid transparent}
.ps-side button:hover{color:var(--ink)}
.ps-side button.on{color:var(--ink);border-bottom-color:var(--ink)}
.ps-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 18px;padding:6px 0 30px;margin:0 0 26px;border-bottom:1px solid #d6d3cc;align-items:start}
.ps-row:last-child{border-bottom:0}
.ps-tile{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:#fff}
.ps-img{display:block;aspect-ratio:1/0.95;background:#e6e1dc;overflow:hidden}
.ps-img img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .3s}
.ps-tile:hover .ps-img img{transform:scale(1.04)}
.ps-cap{display:block;padding:9px 10px 10px}
.ps-cap b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;line-height:1.3}
.ps-cap small{display:block;font-size:11px;color:var(--mute);margin-top:2px}
.ps-card{padding:18px 14px}
.ps-card h3{font:italic 600 20px/1.2 var(--serif);margin:0 0 10px}
.ps-card p{font-size:13px;line-height:1.6;color:#8a877f;margin:0}
.ps-card .ps-empty{color:#9a978f;font-size:12px;line-height:1.5;margin-top:10px}
@media (max-width:900px){.ps-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* admin → Pick pieces (Image Stylist pool): thumbnail cards with one big Live/Off switch */
.pk-g{font-size:12px;letter-spacing:.14em;color:var(--mute);margin:22px 0 10px;font-weight:500}
.pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.pk-card{background:#fff;border:1px solid #e3e0d9;display:flex;flex-direction:column;opacity:.72;transition:opacity .2s}
.pk-card.is-on{opacity:1}
.pk-img{display:block;aspect-ratio:1/1;background:#efece6;overflow:hidden}
.pk-img img{width:100%;height:100%;object-fit:contain;display:block}
.pk-name{display:block;font:600 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:10px 12px 8px;min-height:2.6em}
.pk-sw{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;margin:0 12px 12px;padding:8px 10px;border:1.5px solid var(--ink,#1d1c1a);font:600 13px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.pk-sw i{position:relative;flex:none;width:46px;height:26px;border-radius:13px;background:#cfccc4;transition:background .2s}
.pk-sw i::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.pk-sw[aria-checked="true"]{background:var(--ink,#1d1c1a);color:#fff}
.pk-sw[aria-checked="true"] i{background:#7ac47f}
.pk-sw[aria-checked="true"] i::after{transform:translateX(20px)}
.pk-sw:focus-visible{outline:2px solid var(--blue,#2c4e96);outline-offset:2px}
/* airy, slightly scattered tiles (Jordi's reference): every other column sits a touch lower */
.ps-row>*:nth-child(4n+2){margin-top:14px}.ps-row>*:nth-child(4n+4){margin-top:6px}.ps-row>*:nth-child(4n+3){margin-top:-4px}
.ps-img.has{background:#fff}
.ps-ph .ps-img{background:#e6e1dc}
.ps-ph{background:#fbfaf7}
.ps-vid{background:transparent}
.ps-vid .ps-img{position:relative;background:#e6e1dc}
.ps-play{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:rgba(0,0,0,.18);color:#fff;font-size:13px;line-height:38px;text-align:center;padding-left:3px;box-sizing:border-box}
.ps-y{background:#f6eea4}
.ps-y small.hand{font-size:16px;color:var(--ink);margin-top:2px}
.ps-row .tile.proc{margin:0}
.ps-note{padding:18px 14px;min-height:0}
.ps-igl{display:inline-block;margin:8px 0 18px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:4px}
.ps-ig{text-align:center;margin:10px 0 40px}
.ps-ig a{font:500 13px var(--mono);letter-spacing:.14em;color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor}
/* edit mode: image library */
#libm{position:fixed;inset:0;z-index:200}
.lib-scrim{position:absolute;inset:0;background:rgba(20,19,17,.45)}
.lib{position:absolute;right:0;top:0;bottom:0;width:min(760px,100vw);background:var(--paper,#f7f5f0);box-shadow:-10px 0 40px rgba(0,0,0,.2);display:flex;flex-direction:column}
.lib-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:22px 24px 10px}
.lib-what{font:italic 600 20px var(--serif);margin:2px 0 0}
.lib-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.lib-x{all:unset;cursor:pointer;font-size:28px;line-height:1;padding:0 4px}
.lib-f{padding:0 24px}
.lib-body{overflow:auto;padding:4px 24px 30px;flex:1}
.lib-sec{border-top:1px solid #d6d3cc;padding:10px 0}
.lib-sec summary{cursor:pointer;font-size:12px;letter-spacing:.14em;text-transform:uppercase;list-style:none;padding:4px 0}
.lib-sec summary::before{content:'▸ ';display:inline-block;transition:transform .2s}
.lib-sec[open] summary::before{transform:rotate(90deg)}
.lib-sec summary small{color:var(--mute);margin-left:6px}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:8px}
.lib-it{position:relative;background:#fff;border:1px solid #e3e0d9}
.lib-it.cur{outline:2px solid var(--ink,#1d1c1a)}
.lib-pick{all:unset;cursor:pointer;display:block;aspect-ratio:1/1;width:100%}
.lib-pick img{width:100%;height:100%;object-fit:contain;display:block}
.lib-pick:disabled{cursor:default;opacity:.55}
.lib-del,.lib-rs{position:absolute;top:4px;right:4px;border:0;background:rgba(255,255,255,.92);border-radius:4px;cursor:pointer;font-size:13px;padding:2px 5px;opacity:0;transition:opacity .15s}
.lib-it:hover .lib-del,.lib-del:focus-visible,.lib-rs{opacity:1}
.lib-rs{font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 6px}
.fb-link{all:unset;cursor:pointer;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;border:1.5px dashed #9a978f;color:#6d6a63;margin:0 0 10px}
.fb-link.on{border-style:solid;border-color:var(--ink,#1d1c1a);color:var(--ink,#1d1c1a)}
.ph img{cursor:default}
.ph:has([data-swap]) img{cursor:pointer}
/* ---------- Jordi's Dashboard: Owner / Editor pills + Owner view ---------- */
.dsh-pills{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:26px;flex-wrap:wrap}
.dsh-k{font-size:12px;letter-spacing:.16em;color:var(--mute)}
.dsh-pg{display:inline-flex;background:#ebe5df;border-radius:999px;padding:4px}
.dsh-pg button{all:unset;cursor:pointer;padding:9px 22px;border-radius:999px;font:600 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8c7b6f}
.dsh-pg button.on{background:var(--ink,#3b2a20);color:#fff}
.dsh{padding-bottom:90px}
.dsh-hi{padding:22px 0 8px}
.dsh-hi p{margin:0;color:var(--mute);font-size:13px;letter-spacing:.14em}
.dsh-hi h1{font:italic 700 clamp(30px,5vw,54px)/1.05 var(--serif);margin:6px 0 0}
.dsh-sec{background:#fff;border:1px solid #ebe5df;border-radius:18px;padding:22px;margin-top:22px}
.dsh-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.dsh-h h2{font:italic 700 26px var(--serif);margin:0}
.dsh-n{font-size:12px;color:var(--mute);letter-spacing:.12em}
.dsh-tog{display:inline-flex;border:1.5px solid var(--ink,#3b2a20);border-radius:999px;overflow:hidden}
.dsh-tog button{all:unset;cursor:pointer;padding:7px 16px;font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.dsh-tog button.on{background:var(--ink,#3b2a20);color:#fff}
.dsh-empty{color:#8c7b6f;font-size:15px;margin:10px 0 2px}
.dsh-sub{font-size:12px;letter-spacing:.14em;color:var(--mute);margin:18px 0 10px}
.dm-grid{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
.dm-ring{--p:0;width:150px;height:150px;border-radius:50%;background:conic-gradient(#b8d0e8 calc(var(--p) * 1%),#ebe5df 0);display:grid;place-items:center}
.dm-ring-i{width:112px;height:112px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.dm-ring-i b{font:700 28px var(--serif)}
.dm-ring-i small{font-size:11px;color:var(--mute);max-width:90px;line-height:1.3}
.dm-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dm-c{border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px}
.dm-c span{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.dm-c b{font:700 clamp(24px,3.2vw,38px)/1 var(--serif)}
.dm-c.earn{background:#fbf4d2}.dm-c.exp{background:#dde9f5}.dm-c.prof{background:#fbf4d2}.dm-c.prof.neg{background:#dde9f5}
.dm-sub{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:16px 0 4px}
.dm-goal{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.dm-goal input{width:110px;border:1.5px solid #d8cec5;border-radius:10px;padding:7px 10px;font:500 15px var(--sans)}
.dm-pend{font-size:13px;color:#8c7b6f}
.dm-chart{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;height:120px;margin-top:16px;align-items:end}
.dm-col{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.dm-bars{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:4px;border-bottom:1px solid #ebe5df}
.dm-bars i{width:34%;max-width:22px;border-radius:5px 5px 0 0;min-height:2px}
.dm-bars i.e,.dm-key i.e{background:#e9d99a}.dm-bars i.x,.dm-key i.x{background:#b8d0e8}
.dm-col small{font-size:11px;color:var(--mute)}
.dm-key{display:flex;gap:16px;font-size:11px;color:var(--mute);margin-top:8px;letter-spacing:.1em}
.dm-key i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.rc-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;border:2.5px dashed #d8cec5;border-radius:16px;background:#fff;cursor:pointer;text-align:center;padding:20px;transition:background .2s,border-color .2s}
.rc-drop:hover,.rc-drop.over{background:#fbf4d2;border-color:var(--ink,#3b2a20)}
.rc-drop.busy{opacity:.7}
.rc-big{font:italic 700 28px var(--serif)}
.rc-drop small{color:#8c7b6f;font-size:14px}
.rc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.rc-card{display:grid;grid-template-columns:86px 1fr;gap:12px;border:1px solid #ebe5df;border-radius:14px;padding:10px;background:#fff}
.rc-card.tagged{background:#fbf4d2}
.rc-th{all:unset;cursor:zoom-in;width:86px;height:110px;border-radius:10px;overflow:hidden;background:#ebe5df}
.rc-th img{width:100%;height:100%;object-fit:cover;display:block}
.rc-f{display:flex;flex-direction:column;gap:8px;min-width:0}
.rc-row{display:flex;gap:6px}
.rc-amt{display:inline-flex;align-items:center;border:1.5px solid #d8cec5;border-radius:10px;padding:0 8px;flex:none;width:96px}
.rc-amt input{border:0;outline:0;width:100%;padding:8px 2px;font:600 15px var(--sans);background:none}
.rc-note{flex:1;min-width:0;border:1.5px solid #d8cec5;border-radius:10px;padding:8px 10px;font:400 14px var(--sans)}
.rc-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rc-tags .mono{font-size:10px;letter-spacing:.12em;color:var(--mute);width:100%}
.rc-tags em{font-size:12px;color:#8c7b6f}
.rc-chip{all:unset;cursor:pointer;font:500 12px var(--sans);padding:6px 10px;border-radius:999px;background:#ebe5df}
.rc-chip small{color:#8c7b6f;font-size:10px}
.rc-chip.on{background:var(--ink,#3b2a20);color:#fff}.rc-chip.on small{color:#d8cec5}
.rc-chip.un{background:none;text-decoration:underline;color:#8c7b6f}
.rc-when{font-size:11px;color:#8c7b6f}
.rc-sorted{margin-top:16px}.rc-sorted summary{cursor:pointer;font-size:12px;letter-spacing:.14em;color:var(--mute);margin-bottom:10px}
.rc-big-v{position:fixed;inset:0;z-index:150;background:rgba(59,42,32,.8);display:grid;place-items:center;cursor:zoom-out;padding:20px}
.rc-big-v img{max-width:100%;max-height:100%;border-radius:8px}
.do-list{display:flex;flex-direction:column;gap:8px}
.do-row{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:10px;align-items:center;padding:12px 14px;border-radius:12px;background:#fff}
.do-who b{display:block;font-size:15px}.do-who small{font-size:11px;color:var(--mute);letter-spacing:.08em}
.do-n span{display:block;font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.do-n b{font:700 18px var(--serif)}
.do-p b{color:#3b2a20}.do-p.neg b{color:#3b2a20}
.dc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.dc-card{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:14px;background:#dde9f5}
.dc-card b{font:italic 700 18px var(--serif)}
.dc-card span{font-size:13px;color:#3b2a20;overflow-wrap:anywhere}.dc-card a{color:inherit}
.dc-card small{font-size:11px;color:var(--mute);letter-spacing:.08em;margin-top:4px}
@media (max-width:760px){.dsh-sec{padding:16px;border-radius:14px}.dm-grid{grid-template-columns:1fr;justify-items:center}.dm-cards{grid-template-columns:1fr;width:100%}.dm-c{flex-direction:row;justify-content:space-between;align-items:center}
  .do-row{grid-template-columns:repeat(3,minmax(0,1fr))}.do-who{grid-column:1/-1}.rc-grid{grid-template-columns:1fr}.dsh-pills{justify-content:center}}
/* ---------- h52 Owner dashboard playful widgets (raster cut-outs + die-cut bubble sticker) ---------- */
.dw-row{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:22px;margin-top:22px}
.dw-row .dsh-sec{margin-top:0}
.dw-ask{display:flex;align-items:flex-end;gap:6px;padding:18px 18px 14px;background:#fff}
.dw-penny{width:118px;height:auto;flex:none;align-self:flex-end;filter:drop-shadow(0 6px 8px rgba(0,0,0,.12))}
.dw-bubs{display:flex;align-items:flex-start;gap:4px;flex:1;min-width:0;padding-bottom:40px}
.dw-bub{all:unset;position:relative;display:block;width:min(270px,58%);flex:none;transform:rotate(-2deg)}
.dw-bub img{display:block;width:100%;height:auto;pointer-events:none}
.dw-bub-t{position:absolute;left:14%;right:6%;top:9%;bottom:22%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:19px;line-height:1.2;color:#3b2a20}
.dw-bub-n{width:min(170px,38%);margin-top:34px;transform:rotate(3deg);cursor:pointer;transition:transform .2s}
.dw-bub-n:hover,.dw-bub-n:focus-visible{transform:rotate(0) scale(1.05)}
.dw-bub-n b{font:700 44px/1 var(--serif);color:var(--ink,#3b2a20)}
.dw-bub-n small{font-size:9px;letter-spacing:.14em;color:var(--mute);margin-top:2px}
.dw-jk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:14px;background:#fbf4d2;text-align:center}
.dw-jk-n{font:700 58px/1 var(--serif)}
.dw-jk img{width:min(150px,80%);height:auto;filter:drop-shadow(0 8px 10px rgba(0,0,0,.18));transform:rotate(-3deg)}
.dw-jk-l{font-size:11px;letter-spacing:.16em;margin-top:6px}
.dw-roll{margin:18px 0 4px}
.dw-track{position:relative;height:52px;margin-right:56px}
.dw-track:before{content:"";position:absolute;left:0;right:0;bottom:6px;height:8px;border-radius:99px;background:#ebe5df}
.dw-fill{position:absolute;left:0;bottom:6px;height:8px;border-radius:99px;background:#b8d0e8;width:calc(var(--x) * 100%)}
.dw-flag{position:absolute;right:-56px;bottom:0;font-size:11px;letter-spacing:.1em;background:var(--ink,#3b2a20);color:#fff;border-radius:6px;padding:4px 7px}
.dw-roller{position:absolute;bottom:10px;width:44px;height:auto;left:calc(var(--x) * (100% - 44px))}
.dw-roll.go .dw-roller{animation:dwRoll 1.8s cubic-bezier(.25,.8,.3,1) .2s both}
.dw-roll.go .dw-fill{animation:dwFill 1.8s cubic-bezier(.25,.8,.3,1) .2s both}
.dw-roll.nogoal.go .dw-roller{animation:dwWig 1.4s ease-in-out .3s 2}
.dw-set{display:block;font-size:11px;letter-spacing:.14em;color:var(--mute);margin-top:4px}
@keyframes dwRoll{from{left:0;transform:rotate(-1turn)}to{transform:rotate(0)}}
@keyframes dwFill{from{width:0}}
@keyframes dwWig{0%,100%{transform:rotate(0)}30%{transform:rotate(-12deg)}60%{transform:rotate(10deg)}}
@media (prefers-reduced-motion:reduce){.dw-roll.go .dw-roller,.dw-roll.go .dw-fill,.dw-roll.nogoal.go .dw-roller{animation:none}.dw-bub-n{transition:none}}
@media (max-width:760px){.dw-row{grid-template-columns:1fr;gap:14px;margin-top:14px}
  .dw-ask{padding:14px 10px 10px}.dw-penny{width:84px}.dw-bubs{flex-direction:column;align-items:flex-start;padding-bottom:6px}
  .dw-bub{width:100%;max-width:240px}.dw-bub-t{font-size:16px}.dw-bub-n{width:150px;margin:-6px 0 0 30%}.dw-bub-n b{font-size:38px}
  .dw-jk{flex-direction:row;gap:14px;justify-content:center}.dw-jk img{width:110px;order:-1}.dw-jk-n{font-size:48px}}
.dw-ask{align-items:center}.dw-bubs{padding-bottom:0;align-items:center}.dw-bub-n{margin-top:60px}
.dw-jk img{width:min(118px,70%)}.dw-jk-n{font-size:52px}
@media (max-width:760px){.dw-bubs{align-items:flex-start}.dw-bub-n{margin:-6px 0 0 30%}.dw-jk img{width:100px}}
/* ===== h53: Jordi's exact "pick me" hop for the blue hanging Collections tag (incoming/collections-pickme-from-jordi.txt), verbatim.
   Class map: .hook-item--collections = .ptab.blue (the hanging tag), .hook-label = .ptab.blue span (its label).
   Scoped to body.pickme (SEED.collPickme !== false); !important only to beat the older collSquish/teaseW rules (kept above, unused). Hover pauses the loop. ===== */
@keyframes hook-pickme{
  0%{transform:translateY(0) rotate(0deg) scaleY(1) scaleX(1);}
  5%{transform:translateY(-18px) rotate(0deg) scaleY(1.12) scaleX(0.90);}
  11%{transform:translateY(4px) rotate(0deg) scaleY(0.90) scaleX(1.10);}
  17%{transform:translateY(-3.5px) rotate(-4deg) scaleY(1.04) scaleX(0.97);}
  24%{transform:translateY(0) rotate(3deg) scaleY(1) scaleX(1);}
  30%{transform:translateY(0) rotate(-2deg) scaleY(1) scaleX(1);}
  36%{transform:translateY(0) rotate(1deg) scaleY(1) scaleX(1);}
  41%{transform:translateY(0) rotate(-0.5deg) scaleY(1) scaleX(1);}
  45%,100%{transform:translateY(0) rotate(0deg) scaleY(1) scaleX(1);}
}
@keyframes hook-squish{
  0%,45%,100%{border-radius:2px;}
  5%{border-radius:5px;}
  11%{border-radius:2px 5px 2px 5px;}
  17%{border-radius:5px;}
  24%{border-radius:2px 4px 2px 4px;}
  30%{border-radius:4px 2px 4px 2px;}
  36%{border-radius:2px 3px 2px 3px;}
  41%{border-radius:3px 2px 3px 2px;}
}
body.pickme .ptab.blue{animation:hook-pickme 3.75s ease-in-out infinite!important;transform-origin:50% 0!important;}
body.pickme .ptab.blue span{animation:hook-squish 3.75s ease-in-out infinite!important;}
body.pickme .ptab.blue span{background:#93c5fd!important;border-color:#93c5fd!important;color:#0F0E0C!important;}
body.pickme .ptab.blue:hover,body.pickme .ptab.blue:hover span{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){body.pickme .ptab.blue,body.pickme .ptab.blue span{animation:none!important}}

/* Oct 19: no black frame on Coach's picks tag */
.ptab.on[data-railbest] span{border:1px solid #c9c6c0}
/* ---------- h53b: top "Upload receipts" + clickable money cards with drawers ---------- */
.rc-drop.rc-top{flex-direction:row;justify-content:flex-start;gap:18px;min-height:0;margin-top:16px;padding:20px 26px;border:2.5px dashed var(--ink,#3b2a20);background:#fbf4d2;text-align:left;border-radius:18px}
.rc-drop.rc-top:hover,.rc-drop.rc-top.over{background:#e9d99a}
.rc-top-i{font-size:40px;line-height:1}
.rc-top-t{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.rc-top-t b{font:italic 700 clamp(26px,3.4vw,38px)/1 var(--serif)}
.rc-top-t small{font-size:14px;color:#3b2a20}
.rc-top-n{flex:none;background:var(--ink,#3b2a20);color:#fff;text-decoration:none;font-size:11px;letter-spacing:.14em;padding:9px 14px;border-radius:999px}
button.dm-c{all:unset;box-sizing:border-box;cursor:pointer;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px;transition:transform .15s,box-shadow .15s}
button.dm-c:hover,button.dm-c:focus-visible{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.08)}
button.dm-c:focus-visible{outline:2px solid var(--ink,#3b2a20);outline-offset:2px}
.dm-c .dm-more{font-size:10px;letter-spacing:.14em;color:rgba(0,0,0,.5);text-transform:uppercase}
.dshd-bg{position:fixed;inset:0;z-index:140;background:rgba(59,42,32,.35)}
.dshd{position:fixed;z-index:141;top:0;right:0;bottom:0;width:min(520px,100%);background:#fff;box-shadow:-10px 0 30px rgba(0,0,0,.15);display:flex;flex-direction:column;animation:dshdIn .25s ease-out}
@keyframes dshdIn{from{transform:translateX(30px);opacity:0}}
@media (prefers-reduced-motion:reduce){.dshd{animation:none}button.dm-c{transition:none}}
.dshd-h{display:flex;align-items:flex-end;gap:14px;padding:22px 22px 12px;border-bottom:1px solid #ebe5df;background:#fff}
.dshd-h>div{flex:1}.dshd-h span{font-size:11px;letter-spacing:.14em;color:var(--mute)}
.dshd-h h2{font:italic 700 30px/1 var(--serif);margin:4px 0 0}
.dshd-tot{font:700 30px/1 var(--serif)}.dshd-tot.neg{color:#3b2a20}
.dshd-x{all:unset;cursor:pointer;align-self:flex-start;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#ebe5df;font-size:15px}
.dshd-tog{margin:12px 22px 0;align-self:flex-start}
.dshd-b{flex:1;overflow:auto;padding:14px 22px 40px}
.dshd-grp{background:#fff;border:1px solid #ebe5df;border-radius:14px;padding:12px 14px;margin-bottom:12px}
.dshd-gh{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}.dshd-gh b{font-size:15px}.dshd-gh small{font-size:10px;color:var(--mute);letter-spacing:.1em}.dshd-gh span{margin-left:auto;font:700 18px var(--serif)}
.dshd-rcs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dshd-rc{all:unset;cursor:zoom-in;display:flex;gap:10px;align-items:center;padding:6px;border-radius:10px;background:#fff}
.dshd-rc img{width:52px;height:64px;object-fit:cover;border-radius:6px;background:#ebe5df;flex:none}
.dshd-rc span{display:flex;flex-direction:column;min-width:0}.dshd-rc b{font-size:15px}.dshd-rc small{font-size:11px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dshd-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #ebe5df}
.dshd-row span{display:flex;flex-direction:column;flex:1;min-width:0}.dshd-row small{font-size:10px;color:var(--mute);letter-spacing:.08em}.dshd-row>b{font:700 17px var(--serif)}
.dshd-unpaid{background:#fff}.dshd-unpaid .dshd-row>b{color:#8c7b6f}
.dshd-fine{font-size:12px;color:#8c7b6f;margin:8px 0 0}
.dshd-pt,.dshd-pr{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:8px;align-items:center}
.dshd-pt{padding:0 10px 6px}.dshd-pt span{font-size:10px;letter-spacing:.12em;color:var(--mute)}
.dshd-pr{background:#fff;border:1px solid #ebe5df;border-radius:12px;padding:10px;margin-bottom:8px;font-size:14px}
.dshd-pr>span:first-child{display:flex;flex-direction:column;min-width:0}.dshd-pr small{font-size:10px;color:var(--mute)}
.dshd-pr .pos{color:#3b2a20;font:700 16px var(--serif)}.dshd-pr .neg{color:#3b2a20;font:700 16px var(--serif)}
.rc-big-v{z-index:160}
@media (max-width:760px){.rc-drop.rc-top{padding:16px;gap:12px;flex-wrap:wrap}.rc-top-i{font-size:32px}.rc-top-n{margin-left:44px}
  .dshd{width:100%;top:auto;max-height:88vh;border-radius:18px 18px 0 0}.dshd-rcs{grid-template-columns:1fr}button.dm-c{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}.dm-c .dm-more{width:100%}}
.dshd-bg{z-index:400}.dshd{z-index:401}.rc-big-v{z-index:420}
@media (max-width:760px){.rc-top-t{flex:1 1 200px}.rc-top-t small{font-size:13px}.rc-top-n{margin-left:0}}
.dshd>.pbk{display:none}  /* drawer has its own ✕ */
aside.dshd>button.pbk{display:none!important}
/* ===== h54: Owner dashboard, luxe pass (modelled on the white drawer): white, 1px hairlines, Fraunces italic, spaced caps, black & white.
   Owner side only (.dsh); the Editor layout is untouched. ===== */
.dsh{--hl:#ebe5df;--hl2:#d8cec5;--k:#3b2a20;--g:#8c7b6f;padding-bottom:120px}
.dsh .mono,.dsh .dsh-k,.dsh-n{font-family:var(--mono)}
.dsh-hi{padding:34px 0 6px}
.dsh-hi p{font:400 10.5px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--g)}
.dsh-hi h1{font:italic 500 clamp(32px,4.6vw,56px)/1.04 var(--serif);letter-spacing:-.01em;margin-top:10px;color:var(--k)}
.dsh .dsh-sec{background:#fff;border:1px solid var(--hl);border-radius:4px;box-shadow:none;padding:28px 30px;margin-top:20px}
.dsh .dsh-h{margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--hl)}
.dsh .dsh-h h2{font:italic 500 28px/1 var(--serif);color:var(--k)}
.dsh .dsh-n{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--g)}
.dsh .dsh-sub{font:400 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--g);margin:24px 0 12px}
.dsh .dsh-empty{font:italic 400 15px var(--serif);color:var(--g)}
.dsh .dsh-tog{border:1px solid var(--k);border-radius:999px}
.dsh .dsh-tog button{padding:6px 16px;font:400 10px var(--mono);letter-spacing:.2em}
/* upload receipts: white, hairline, "+" */
.dsh .rc-drop.rc-top{background:#fff;border:1px solid var(--hl2);border-radius:4px;padding:24px 30px;gap:22px;margin-top:22px;transition:border-color .2s,background .2s}
.dsh .rc-drop.rc-top:hover,.dsh .rc-drop.rc-top.over{background:#fff;border-color:var(--k)}
.dsh .rc-top-i{width:46px;height:46px;flex:none;border:1px solid var(--k);border-radius:50%;display:grid;place-items:center;font:300 26px/1 var(--sans);color:var(--k)}
.dsh .rc-top-t b{font:italic 500 clamp(24px,2.6vw,32px)/1 var(--serif);color:var(--k)}
.dsh .rc-top-t small{font:400 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--g);margin-top:6px}
.dsh .rc-top-n{background:none;color:var(--k);border:1px solid var(--k);border-radius:999px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:9px 16px}
.dsh .rc-top-n:hover{background:var(--k);color:#fff}
.dsh .rc-drop:not(.rc-top){background:#fff;border:1px dashed var(--hl2);border-radius:4px;min-height:120px}
.dsh .rc-drop:not(.rc-top):hover,.dsh .rc-drop:not(.rc-top).over{background:#fff;border-color:var(--k)}
.dsh .rc-big{font:italic 500 24px var(--serif)}
.dsh .rc-big:before{content:"+ ";font-style:normal;font-weight:300}
.dsh .rc-drop small{font:400 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--g)}
/* row: Penny + jacket, refined */
.dsh .dw-row{gap:20px;margin-top:20px}
.dsh .dw-ask.dw-lux{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;background:#fff;padding:26px 34px}
.dsh .dw-lux .dw-penny{width:76px;filter:none;align-self:center}
.dsh .dw-q{display:flex;flex-direction:column;gap:10px;min-width:0;border-left:1px solid var(--hl);padding-left:28px}
.dsh .dw-q .dsh-k{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--g)}
.dsh .dw-qt{margin:0;font:italic 400 clamp(19px,1.8vw,24px)/1.25 var(--serif);color:var(--k)}
.dsh .dw-num{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding-left:10px}
.dsh .dw-num b{font:300 clamp(60px,6vw,88px)/.85 var(--serif);letter-spacing:-.03em;color:var(--k);font-variant-numeric:lining-nums}
.dsh .dw-num small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--g);border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .2s}
.dsh .dw-num:hover small,.dsh .dw-num:focus-visible small{border-color:var(--k);color:var(--k)}
.dsh .dw-jk{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;column-gap:22px;row-gap:6px;background:#fff;padding:24px 30px;text-align:left}
.dsh .dw-jk img{grid-row:1/3;width:84px;transform:none;filter:none}
.dsh .dw-jk-n{font:300 clamp(60px,6vw,88px)/.85 var(--serif);letter-spacing:-.03em;color:var(--k);align-self:end}
.dsh .dw-jk-l{font-size:10px;letter-spacing:.22em;color:var(--g);margin:0;align-self:start}
/* money: white cards, hairlines, tiny colour cue */
.dsh .dm-grid{gap:34px}
.dsh .dm-ring{width:136px;height:136px;background:conic-gradient(var(--k) calc(var(--p) * 1%),var(--hl) 0)}
.dsh .dm-ring-i{width:130px;height:130px}
.dsh .dm-ring-i b{font:300 34px var(--serif);letter-spacing:-.02em}
.dsh .dm-ring-i small{font:400 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--g);margin-top:4px}
.dsh .dm-cards{gap:0;border:1px solid var(--hl)}
.dsh button.dm-c,.dsh .dm-c{background:#fff!important;border-radius:0;padding:20px 22px;gap:10px;border-left:1px solid var(--hl);box-shadow:none;transform:none}
.dsh .dm-cards>.dm-c:first-child{border-left:0}
.dsh .dm-c span{font:400 10px var(--mono);letter-spacing:.2em;color:var(--g);display:flex;align-items:center;gap:8px}
.dsh .dm-c span:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cue,#d8cec5)}
.dsh .dm-c.earn{--cue:#3b2a20}.dsh .dm-c.exp{--cue:#8c7b6f}.dsh .dm-c.prof{--cue:var(--k)}.dsh .dm-c.prof.neg{--cue:#3b2a20}
.dsh .dm-c b{font:300 clamp(30px,3.4vw,44px)/1 var(--serif);letter-spacing:-.02em;color:var(--k)}
.dsh .dm-c.prof.neg b{color:#3b2a20}
.dsh .dm-c .dm-more{font-size:9.5px;letter-spacing:.2em;color:var(--g);border-top:1px solid var(--hl);padding-top:10px;margin-top:4px}
.dsh button.dm-c:hover,.dsh button.dm-c:focus-visible{background:#fff!important;transform:none;box-shadow:none}
.dsh button.dm-c:hover .dm-more{color:var(--k)}
.dsh .dm-sub{margin:22px 0 4px;gap:22px}
.dsh .dm-goal{font:400 10px var(--mono);letter-spacing:.2em;color:var(--g)}
.dsh .dm-goal input{border:0;border-bottom:1px solid var(--hl2);border-radius:0;padding:6px 2px;font:italic 400 17px var(--serif);width:120px;background:none}
.dsh .dm-goal input:focus{outline:0;border-color:var(--k)}
.dsh .dm-pend{font:italic 400 14px var(--serif);color:var(--g)}
.dsh .dm-bars{border-bottom:1px solid var(--hl)}
.dsh .dm-bars i{border-radius:0;width:22%;max-width:10px}
.dsh .dm-bars i.e,.dsh .dm-key i.e{background:var(--k)}.dsh .dm-bars i.x,.dsh .dm-key i.x{background:#d8cec5}
.dsh .dm-col small,.dsh .dm-key{font:400 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--g)}
.dsh .dm-key i{border-radius:0;width:8px;height:8px}
/* goal roller: thin hairline track, small mascot */
.dsh .dw-track{height:40px}
.dsh .dw-track:before{height:1px;bottom:10px;border-radius:0;background:var(--hl2)}
.dsh .dw-fill{height:1px;bottom:10px;border-radius:0;background:var(--k)}
.dsh .dw-roller{width:30px;bottom:11px;left:calc(var(--x) * (100% - 30px))}
.dsh .dw-flag{background:none;color:var(--k);border:1px solid var(--k);border-radius:999px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;padding:4px 9px}
.dsh .dw-set{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase}
/* receipts / orders / clients */
.dsh .rc-card{border:1px solid var(--hl);border-radius:4px}
.dsh .rc-card.tagged{background:#fff}
.dsh .rc-th{border-radius:2px}
.dsh .rc-amt,.dsh .rc-note{border:0;border-bottom:1px solid var(--hl2);border-radius:0}
.dsh .rc-chip{background:#fff;border:1px solid var(--hl2);font-size:11.5px}
.dsh .rc-chip.on{background:var(--k);border-color:var(--k)}
.dsh .rc-chip.un{border:0}
.dsh .do-list{gap:0;border-top:1px solid var(--hl)}
.dsh .do-row{background:none;border-radius:0;border-bottom:1px solid var(--hl);padding:16px 4px}
.dsh .do-who b{font:italic 500 17px var(--serif)}
.dsh .do-who small,.dsh .do-n span{font-size:9.5px;letter-spacing:.16em;color:var(--g)}
.dsh .do-n b{font:400 19px var(--serif)}
.dsh .do-p b{color:var(--k)}.dsh .do-p.neg b{color:#3b2a20}
.dsh .dc-grid{gap:0;border-top:1px solid var(--hl);border-left:1px solid var(--hl)}
.dsh .dc-card{background:#fff;border-radius:0;border-right:1px solid var(--hl);border-bottom:1px solid var(--hl);padding:20px}
.dsh .dc-card b{font:italic 500 19px var(--serif)}
.dsh .dc-card span{font-size:13px;color:#3b2a20}
.dsh .dc-card small{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--g);margin-top:8px}
@media (max-width:760px){
  .dsh .dsh-sec{padding:20px 18px}
  .dsh .rc-drop.rc-top{padding:18px;gap:16px;flex-wrap:nowrap}.dsh .rc-top-i{width:40px;height:40px;font-size:22px}.dsh .rc-top-n{display:none}
  .dsh .dw-ask.dw-lux{grid-template-columns:auto 1fr;gap:16px 18px;padding:20px 18px}.dsh .dw-lux .dw-penny{width:56px}
  .dsh .dw-q{padding-left:18px}.dsh .dw-num{grid-column:1/-1;flex-direction:row;align-items:baseline;justify-content:space-between;border-top:1px solid var(--hl);padding:14px 0 0}
  .dsh .dw-num b,.dsh .dw-jk-n{font-size:56px}
  .dsh .dw-jk{padding:20px 18px}.dsh .dw-jk img{width:64px}
  .dsh .dm-cards{border:0;border-top:1px solid var(--hl)}.dsh button.dm-c,.dsh .dm-c{border-left:0;border-bottom:1px solid var(--hl);padding:16px 2px;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
  .dsh .dm-c .dm-more{width:100%;border-top:0;padding-top:0;margin-top:0}
}
/* ===== h55: Owner dashboard "Pinterest-pretty" pass — warm cream, pillowy rounded cards, blush / denim-soft / sage, money as soft rings,
   iPhone-style switches. Owner side only (.dsh + the Owner/Editor switch + drawer switch); Editor layout untouched. ===== */
body:has(.dsh){background:#f8f5f0}
.dsh{--cream:#f8f5f0;--card:#fff;--blush:#dde9f5;--blush2:#b8d0e8;--denim:#f8f5f0;--denim2:#3b2a20;--sage:#fbf4d2;--sage2:#3b2a20;--k:#3b2a20;--g:#8c7b6f;--hl:#ebe5df}
.dsh .dsh-hi{padding:30px 4px 4px}
.dsh .dsh-hi p{color:#8c7b6f}
.dsh .dsh-hi h1{font-weight:400;color:var(--k)}
.dsh .dsh-sec{background:var(--card);border:0;border-radius:26px;box-shadow:0 1px 0 rgba(59,42,32,.04),0 14px 34px rgba(59,42,32,.07);padding:30px 32px}
.dsh .dsh-h{border-bottom:0;padding-bottom:0;margin-bottom:18px;align-items:center}
.dsh .dsh-h h2{font-weight:400;font-size:30px}
/* top upload: soft, rounded, airy */
.dsh .rc-drop.rc-top{background:var(--card);border:1px dashed #d8cec5;border-radius:26px;box-shadow:0 14px 34px rgba(59,42,32,.06);padding:22px 28px}
.dsh .rc-drop.rc-top:hover,.dsh .rc-drop.rc-top.over{background:#fff;border-color:var(--blush2)}
.dsh .rc-top-i{border:0;background:var(--blush);color:#3b2a20;font-weight:300}
.dsh .rc-top-n{border-color:#d8cec5;color:#8c7b6f}
.dsh .rc-top-n:hover{background:var(--blush);border-color:var(--blush);color:var(--k)}
/* Penny + jacket: friendly soft tiles */
.dsh .dw-ask.dw-lux{background:var(--blush);box-shadow:none;border-radius:26px}
.dsh .dw-lux .dw-penny{width:92px;filter:drop-shadow(0 8px 12px rgba(59,42,32,.12))}
.dsh .dw-q{border-left:1px solid rgba(59,42,32,.15)}
.dsh .dw-q .dsh-k{color:#8c7b6f}
.dsh .dw-num b{font-weight:300;color:#3b2a20}
.dsh .dw-num small{color:#8c7b6f}
.dsh .dw-jk{background:var(--denim);box-shadow:none;border-radius:26px}
.dsh .dw-jk img{width:96px;filter:drop-shadow(0 10px 14px rgba(59,42,32,.16));transform:rotate(-4deg)}
.dsh .dw-jk-n{color:#3b2a20;font-weight:300}.dsh .dw-jk-l{color:#8c7b6f}
/* money rings */
.dm-rings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.mr{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:22px 10px 20px;border-radius:24px;transition:transform .25s ease,box-shadow .25s ease}
.mr-earn{background:var(--blush)}.mr-exp{background:var(--denim)}.mr-prof{background:var(--sage)}
.mr:hover,.mr:focus-visible{transform:translateY(-3px);box-shadow:0 12px 24px rgba(59,42,32,.10)}
.mr:focus-visible{outline:2px solid var(--k);outline-offset:3px}
.mr-w{position:relative;width:min(170px,100%);aspect-ratio:1;display:grid;place-items:center}
.mr-w svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.mr-tr{fill:none;stroke:rgba(255,255,255,.75);stroke-width:7}
.mr-fg{fill:none;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .6s ease}
.mr-earn .mr-fg{stroke:var(--blush2)}.mr-exp .mr-fg{stroke:var(--denim2)}.mr-prof .mr-fg{stroke:var(--sage2)}
.mr-fg.go{animation:mrIn 1.4s cubic-bezier(.3,.8,.3,1) .2s both}
@keyframes mrIn{from{stroke-dashoffset:var(--c)}}
.mr-w b{position:relative;font:300 clamp(26px,2.6vw,36px)/1 var(--serif);letter-spacing:-.02em;color:var(--k)}
.mr.neg .mr-w b{color:#3b2a20}
.mr-l{font:italic 400 19px var(--serif);color:var(--k);margin-top:4px}
.mr-s{font:400 9.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--g)}
.dsh .dm-sub{justify-content:center;margin-top:22px}
.dsh .dm-goal{color:var(--g)}
.dsh .dm-goal input{border-bottom-color:#d8cec5}
/* roller on cream */
.dsh .dw-track:before{background:#ebe5df}.dsh .dw-fill{background:var(--blush2)}
.dsh .dw-flag{border-color:#d8cec5;color:#8c7b6f}
.dsh .dw-roller{width:34px;left:calc(var(--x) * (100% - 34px))}
.dsh .dsh-empty{text-align:center}
/* lists: soft rounded rows */
.dsh .do-list{gap:8px;border-top:0}
.dsh .do-row{background:var(--cream);border:0;border-radius:18px;padding:14px 18px}
.dsh .dc-grid{gap:12px;border:0}
.dsh .dc-card{background:var(--cream);border:0;border-radius:20px}
.dsh .rc-card{background:var(--cream);border:0;border-radius:18px}
.dsh .rc-chip{border-color:#d8cec5;background:#fff}
/* iPhone-style switch (Owner/Editor, Week/Month, drawer) */
.iosw{display:inline-flex;align-items:center;gap:10px;font:400 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase}
.iosw-l,.iosw-r{all:unset;cursor:pointer;color:#8c7b6f;transition:color .25s}
.iosw-l.on,.iosw-r.on{color:#3b2a20}
.iosw .iosw-t{all:unset;cursor:pointer;position:relative;width:50px;height:30px;border-radius:999px;background:#ebe5df;box-shadow:inset 0 1px 3px rgba(59,42,32,.12);transition:background .26s ease}
.iosw.r .iosw-t{background:#b8d0e8}
.iosw .iosw-t i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(59,42,32,.22),0 0 0 .5px rgba(0,0,0,.04);transition:transform .26s cubic-bezier(.4,1.3,.5,1)}
.iosw.r .iosw-t i{transform:translateX(20px)}
.iosw .iosw-t:focus-visible{outline:2px solid #3b2a20;outline-offset:3px}
.iosw.r .iosw-l{color:#8c7b6f}.iosw:not(.r) .iosw-r{color:#8c7b6f}.iosw.r .iosw-r,.iosw:not(.r) .iosw-l{color:#3b2a20}
.dsh-pills .iosw{padding:8px 14px;background:#fff;border-radius:999px;box-shadow:0 6px 18px rgba(59,42,32,.07)}
.dshd-tog{margin:14px 22px 0}
@media (prefers-reduced-motion:reduce){.iosw .iosw-t,.iosw .iosw-t i,.mr,.mr-fg{transition:none}.mr-fg.go{animation:none}}
@media (max-width:760px){
  .dsh .dsh-sec{border-radius:22px;padding:22px 18px}
  .dm-rings{grid-template-columns:1fr 1fr;gap:12px}.mr-earn{grid-column:1/-1}.mr-earn .mr-w{width:150px}.mr-w{width:118px}.mr-w b{font-size:24px}.mr-earn .mr-w b{font-size:30px}
  .mr{padding:18px 8px 16px;border-radius:20px}.mr-l{font-size:17px}
  .dsh .dsh-h{flex-wrap:wrap;gap:12px}
}
/* ===== h56: dashboard shell (own sidebar / bottom tab bar), views, How's it going, Orders chips, AI Help ===== */
body.dash-mode{background:#f8f5f0}
body.dash-mode main{padding:0}
body.dash-mode .phonebtn{left:auto;right:18px}
.dshl{--k:#3b2a20;--g:#8c7b6f;--blush:#dde9f5;--blush2:#b8d0e8;--denim:#f8f5f0;--denim2:#3b2a20;--sage:#fbf4d2;--sage2:#3b2a20;--cream:#f8f5f0;--card:#fff;display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}
.dsb{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:26px;padding:34px 26px 28px;background:#fff;border-right:1px solid #ebe5df;box-shadow:8px 0 30px rgba(59,42,32,.04)}
.dsb-top{display:flex;flex-direction:column;gap:6px}
.dsb-brand{font:italic 400 25px/1.05 var(--serif);color:var(--k);letter-spacing:-.01em}
.dsb-top small{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--g)}
.dsb-sw .iosw{padding:0;background:none;box-shadow:none}
.dsb-nav{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.dsb-i{all:unset;cursor:pointer;position:relative;padding:11px 14px 11px 16px;border-radius:14px;font:400 15px var(--sans);color:#8c7b6f;transition:background .2s,color .2s}
.dsb-i:hover{background:#f8f5f0;color:var(--k)}
.dsb-i.on{background:var(--blush);color:var(--k)}
.dsb-i.on:before{content:"";position:absolute;left:6px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--blush2)}
.dsb-i:focus-visible{outline:2px solid var(--k);outline-offset:1px}
.dsb-site{margin-top:auto;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--g);text-decoration:none}
.dsb-site:hover{color:var(--k)}
.dshl-m{min-width:0;padding:10px clamp(20px,3.4vw,56px) 80px}
.dshl-m .dsh.wrap{max-width:1180px;margin:0 auto;padding-left:0;padding-right:0}
.dshl.is-editor .dshl-m{padding-top:0}
/* refined type + breathing room */
.dshl .dsh .dsh-hi{padding:44px 4px 8px}
.dshl .dsh .dsh-hi h1{font-size:clamp(34px,4.2vw,56px);font-weight:300;letter-spacing:-.015em}
.dshl .dsh .dsh-vh h1{font-size:clamp(34px,4vw,52px)}
.dshl .dsh .dsh-sec{margin-top:26px;padding:34px 36px;box-shadow:0 1px 0 rgba(59,42,32,.03),0 18px 44px rgba(59,42,32,.07)}
.dshl .dsh .dsh-h h2{font-weight:300;font-size:30px;letter-spacing:-.01em}
.dshl .dsh .dw-row{margin-top:26px;gap:26px}
.dshl .dsh .rc-drop.rc-top{margin-top:26px}
.dsh-fine{margin:18px 0 0;font:400 12px var(--sans);color:var(--g)}
/* How's it going? */
.hw-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hw-t{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:22px 24px;border-radius:22px;transition:transform .25s,box-shadow .25s}
.hw-t:hover,.hw-t:focus-visible{transform:translateY(-3px);box-shadow:0 12px 26px rgba(59,42,32,.10)}
.hw-t:focus-visible{outline:2px solid var(--k);outline-offset:3px}
.hw-a{background:var(--sage)}.hw-b{background:var(--blush)}.hw-c{background:var(--denim)}
.hw-t b{font:300 54px/1 var(--serif);letter-spacing:-.03em;color:var(--k)}
.hw-t span{font:italic 400 18px var(--serif);color:var(--k)}
.hw-t small{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--g);margin-top:6px}
/* Orders view */
.os-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.os-chip{all:unset;cursor:pointer;padding:9px 16px;border-radius:999px;background:var(--cream);font:400 13px var(--sans);color:#8c7b6f;transition:background .2s,color .2s}
.os-chip small{font-size:11px;color:var(--g);margin-left:4px}
.os-chip:hover{background:#ebe5df}
.os-chip.on{background:var(--k);color:#fff}.os-chip.on small{color:#d8cec5}
.os-list{display:flex;flex-direction:column;gap:10px}
.os-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.6fr) auto 96px;gap:18px;align-items:center;padding:16px 20px;border-radius:18px;background:var(--cream)}
.os-who b{display:block;font:italic 400 18px var(--serif);color:var(--k)}
.os-who small{font-size:9.5px;letter-spacing:.14em;color:var(--g)}
.os-what{font-size:13px;color:#8c7b6f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.os-st{justify-self:start;padding:6px 12px;border-radius:999px;font:400 12px var(--sans);white-space:nowrap}
.os-new{background:#fff;color:#8c7b6f;box-shadow:inset 0 0 0 1px #ebe5df}
.os-waiting-on-deposit{background:var(--blush);color:#3b2a20}
.os-in-progress{background:var(--denim);color:#3b2a20}
.os-shipped{background:var(--sage);color:#3b2a20}
.os-amt{font:300 20px var(--serif);text-align:right;color:var(--k)}
/* Goals view */
.gl-ring{display:flex;justify-content:center;margin:6px 0 4px}.gl-ring .mr{width:min(280px,100%)}
/* AI Help */
.ai-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.ai-t{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:18px;background:var(--cream);font:400 15px var(--sans);color:var(--k);transition:background .2s,box-shadow .2s,transform .2s}
.ai-t i{flex:none;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #d8cec5;transition:background .2s,box-shadow .2s}
.ai-t:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(59,42,32,.08)}
.ai-t.on{background:var(--blush)}
.ai-t.on i{background:var(--blush2);box-shadow:inset 0 0 0 4px #fff,0 0 0 1.5px var(--blush2)}
.ai-t:focus-visible{outline:2px solid var(--k);outline-offset:2px}
.ai-own{display:flex;flex-direction:column;gap:8px;margin-top:22px}
.ai-own span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--g)}
.ai-own textarea{border:0;border-radius:18px;background:var(--cream);padding:16px 18px;font:400 15px/1.5 var(--sans);color:var(--k);resize:vertical}
.ai-own textarea:focus{outline:2px solid var(--blush2);outline-offset:0}
.ai-send{display:flex;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap}
.ai-go{all:unset;cursor:pointer;padding:14px 28px;border-radius:999px;background:var(--k);color:#fff;font:italic 400 18px var(--serif);box-shadow:0 10px 24px rgba(59,42,32,.18);transition:transform .2s,opacity .2s}
.ai-go:hover{transform:translateY(-2px)}
.ai-go[disabled]{opacity:.35;cursor:default;transform:none;box-shadow:none}
.ai-send small{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--g)}
.ai-list{display:flex;flex-direction:column;gap:10px}
.ai-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 20px;border-radius:18px;background:var(--cream)}
.ai-row b{font:italic 400 17px var(--serif);color:var(--k)}
.ai-row p{margin:4px 0 0;font-size:14px;color:#8c7b6f}
.ai-row small{display:block;margin-top:6px;font-size:9.5px;letter-spacing:.14em;color:var(--g)}
.ai-st{flex:none;padding:6px 12px;border-radius:999px;font:400 12px var(--sans);text-transform:capitalize;background:var(--denim);color:#3b2a20}
.ai-done{background:var(--sage);color:#3b2a20}.ai-working,.ai-in-progress{background:var(--blush);color:#3b2a20}
@media (prefers-reduced-motion:reduce){.hw-t,.ai-t,.ai-go,.dsb-i,.os-chip{transition:none}}
@media (max-width:900px){
  .dshl{grid-template-columns:1fr}
  .dsb{position:static;height:auto;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-right:0;border-bottom:1px solid #ebe5df;box-shadow:none}
  .dsb-brand{font-size:21px}.dsb-top small,.dsb-site{display:none}
  .dsb-nav{position:fixed;z-index:120;left:0;right:0;bottom:0;flex-direction:row;gap:4px;margin:0;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 -8px 24px rgba(59,42,32,.08);overflow-x:auto;scrollbar-width:none}
  .dsb-nav::-webkit-scrollbar{display:none}
  .dsb-i{flex:none;padding:10px 14px;font-size:13px;border-radius:12px}.dsb-i.on:before{display:none}
  .dshl-m{padding:0 16px 110px}
  body.dash-mode .phonebtn{bottom:84px}
  .hw-g{grid-template-columns:1fr;gap:10px}.hw-t{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:10px;padding:16px 20px}.hw-t b{font-size:40px}.hw-t small{margin-left:auto}
  .os-row{grid-template-columns:1fr auto;gap:8px 12px}.os-what{grid-column:1/-1;order:3;white-space:normal}.os-amt{font-size:18px}
  .os-st{justify-self:end}
  .dshl .dsh .dsh-sec{padding:24px 20px}
}
@media (max-width:900px){.dsb-nav{gap:2px;padding-left:6px;padding-right:6px}.dsb-i{flex:1 1 0;min-width:0;padding:10px 2px;font-size:11px;text-align:center;white-space:nowrap;letter-spacing:-.01em}}
@media (max-width:380px){.dsb-i{font-size:10px}}

/* ===== h57: Owner dashboard palette — ONLY white, baby blue, baby yellow (sparingly), deep brown (+ its light tints for hairlines/muted text).
   No green / pink / red. Status differences = brown outline / baby blue fill / baby yellow fill / brown fill. Editor layout untouched. ===== */
body.dash-mode{background:#f8f5f0}
.dsh,.dshl{--k:#3b2a20;--g:#8c7b6f;--hl:#ebe5df;--hl2:#d8cec5;--cream:#f8f5f0;--card:#fff;--blush:#dde9f5;--blush2:#b8d0e8;--denim:#fff;--denim2:#3b2a20;--sage:#fbf4d2;--sage2:#e9d99a}
.dsb{background:#fff;border-right-color:#ebe5df;box-shadow:8px 0 30px rgba(59,42,32,.03)}
.dsb-i{color:#8c7b6f}.dsb-i:hover{background:#f8f5f0;color:#3b2a20}
.dsb-i.on{background:#dde9f5;color:#3b2a20}.dsb-i.on:before{background:#3b2a20}
/* switches: brown text, baby-blue "on" track */
.iosw-l,.iosw-r,.iosw.r .iosw-l,.iosw:not(.r) .iosw-r{color:#b3a59a}.iosw.r .iosw-r,.iosw:not(.r) .iosw-l{color:#3b2a20}
.iosw .iosw-t{background:#ebe5df}.iosw.r .iosw-t{background:#b8d0e8}
.dsh-pills .iosw{background:#fff}
/* tiles */
.dsh .dw-ask.dw-lux{background:#dde9f5}
.dsh .dw-num b,.dsh .dw-jk-n,.dsh .mr-w b,.hw-t b{color:#3b2a20}
.dsh .dw-q{border-left-color:rgba(59,42,32,.14)}.dsh .dw-q .dsh-k,.dsh .dw-num small,.dsh .dw-jk-l{color:#8c7b6f}
.dsh .dw-jk{background:#fff;box-shadow:inset 0 0 0 1px #ebe5df}
.dsh .rc-top-i{background:#dde9f5;color:#3b2a20}
.dsh .rc-drop.rc-top{border-color:#d8cec5}.dsh .rc-drop.rc-top:hover,.dsh .rc-drop.rc-top.over{border-color:#3b2a20}
.dsh .rc-top-n:hover{background:#dde9f5;border-color:#dde9f5}
/* money rings: earned = baby blue, expenses = white + brown line, profit = baby yellow */
.mr-earn{background:#dde9f5}.mr-exp{background:#fff;box-shadow:inset 0 0 0 1px #ebe5df}.mr-prof{background:#fbf4d2}
.mr-earn .mr-fg{stroke:#3b2a20}.mr-exp .mr-fg{stroke:#3b2a20}.mr-prof .mr-fg{stroke:#3b2a20}
.mr-tr{stroke:rgba(255,255,255,.85)}.mr-exp .mr-tr{stroke:#f1ece6}
.mr.neg .mr-w b,.dsh .dm-c.prof.neg b{color:#3b2a20}
.dsh .dw-track:before{background:#ebe5df}.dsh .dw-fill{background:#b8d0e8}
/* How's it going: in progress = baby blue, unpaid = baby yellow, to sort = white + brown outline */
.hw-a{background:#dde9f5}.hw-b{background:#fbf4d2}.hw-c{background:#fff;box-shadow:inset 0 0 0 1px #d8cec5}
.hw-t span{color:#3b2a20}.hw-t small{color:#8c7b6f}
/* Orders status chips */
.os-chip{background:#f8f5f0;color:#8c7b6f}.os-chip:hover{background:#ebe5df}.os-chip.on{background:#3b2a20;color:#fff}.os-chip.on small{color:#d8cec5}
.os-new{background:#fff;color:#3b2a20;box-shadow:inset 0 0 0 1px #3b2a20}
.os-waiting-on-deposit{background:#fbf4d2;color:#3b2a20;box-shadow:none}
.os-in-progress{background:#dde9f5;color:#3b2a20;box-shadow:none}
.os-shipped{background:#3b2a20;color:#fff;box-shadow:none}
/* AI Help */
.ai-t.on{background:#dde9f5}.ai-t i{box-shadow:inset 0 0 0 1.5px #d8cec5}.ai-t.on i{background:#3b2a20;box-shadow:inset 0 0 0 4px #fff,0 0 0 1.5px #3b2a20}
.ai-own textarea:focus{outline-color:#b8d0e8}
.ai-go{background:#3b2a20;color:#fff;box-shadow:0 10px 24px rgba(59,42,32,.18)}
.ai-st{background:#fff;color:#3b2a20;box-shadow:inset 0 0 0 1px #3b2a20}.ai-working,.ai-in-progress{background:#fbf4d2;box-shadow:none}.ai-done{background:#dde9f5;box-shadow:none}
/* lists / drawer: profit + / − in brown (sign carries the meaning) */
.dsh .do-p b,.dsh .do-p.neg b,.dshd-pr .pos,.dshd-pr .neg,.dshd-tot.neg{color:#3b2a20}
.dsh .rc-chip.on{background:#3b2a20;border-color:#3b2a20;color:#fff}
@media (max-width:900px){.dsb-nav{background:rgba(255,255,255,.96);box-shadow:0 -8px 24px rgba(59,42,32,.06)}}/* ===== h58: three alternative Overview layouts (SEED.dashLayout / ?dl=a|b|c). Palette unchanged (white, #f8f5f0, baby blue, baby yellow sparingly, deep brown + tints).
   Stickers = the existing raster cut-outs with a CSS die-cut outline (stacked white drop-shadows) + soft shadow + slight tilt; no boxes behind them. ===== */
.dsh.dl-a,.dsh.dl-b,.dsh.dl-c{overflow-x:clip}
.stk{display:block;height:auto;pointer-events:none;user-select:none;
  filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 10px 16px rgba(59,42,32,.16)) drop-shadow(0 2px 3px rgba(59,42,32,.10))}
.dlv .dl-hi{font:400 10.5px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:#8c7b6f;margin:0}
.dlv .dl-h1{font:italic 300 clamp(36px,4.6vw,62px)/1.02 var(--serif);letter-spacing:-.015em;color:#3b2a20;margin:12px 0 0}
.dlv .dl-h2{font:italic 300 28px/1 var(--serif);color:#3b2a20;margin:0;letter-spacing:-.01em}
.dlv .dl-k{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#8c7b6f;margin:0}
.dlv .dl-qt{font:italic 300 clamp(20px,1.9vw,26px)/1.25 var(--serif);color:#3b2a20;margin:10px 0 0}
.dlv .dl-n{all:unset;cursor:pointer;display:inline-flex;align-items:baseline;gap:12px;margin-top:14px}
.dlv .dl-n b,.dlv .dl-big{font:300 clamp(64px,6.4vw,96px)/.85 var(--serif);letter-spacing:-.04em;color:#3b2a20}
.dlv .dl-n small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#8c7b6f;border-bottom:1px solid transparent;transition:border-color .2s}
.dlv .dl-n:hover small,.dlv .dl-n:focus-visible small{border-color:#3b2a20;color:#3b2a20}
.dlv .dl-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.dlv .dl-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}
.dlv .dl-st{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:6px 18px 6px 0;border-right:1px solid #ebe5df;transition:opacity .2s}
.dlv .dl-st+.dl-st{padding-left:18px}.dlv .dl-st:last-child{border-right:0}
.dlv .dl-st b{font:300 48px/1 var(--serif);letter-spacing:-.03em;color:#3b2a20}
.dlv .dl-st span{font:italic 300 17px/1.25 var(--serif);color:#3b2a20}
.dlv .dl-st small{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#8c7b6f}
.dlv .dl-st:hover small,.dlv .dl-st:focus-visible small{color:#3b2a20}
.dlv .dl-st:focus-visible,.dlv .dl-n:focus-visible{outline:2px solid #3b2a20;outline-offset:4px;border-radius:6px}
/* rings without boxes: the coloured track carries the palette */
.dlv .dl-rings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:20px}
.dlv .mr{background:none!important;box-shadow:none!important;padding:6px 4px}
.dlv .mr:hover,.dlv .mr:focus-visible{transform:translateY(-3px)}
.dlv .mr-tr{stroke-width:9}.dlv .mr-fg{stroke-width:9}
.dlv .mr-earn .mr-tr{stroke:#dde9f5}.dlv .mr-exp .mr-tr{stroke:#ebe5df}.dlv .mr-prof .mr-tr{stroke:#fbf4d2}
.dlv .mr-fg{stroke:#3b2a20}
.dlv .dm-sub{justify-content:center}
/* ---------- A: editorial bento ---------- */
.dlA .dA-hd{padding:46px 4px 6px;max-width:760px}
.dlA .dA-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px;margin-top:30px}
.dlA .dA-t{position:relative;background:#fff;border-radius:30px;padding:30px 32px;box-shadow:0 18px 44px rgba(59,42,32,.06)}
.dlA .dA-how{grid-column:1/8}
.dlA .dA-q{grid-column:8/13;background:#dde9f5;padding-right:150px}
.dlA .dA-penny{position:absolute;right:-16px;top:-34px;width:150px;transform:rotate(8deg)}
.dlA .dA-money{grid-column:1/9}
.dlA .dA-jk{grid-column:9/13;background:#f8f5f0;box-shadow:none;display:flex;flex-direction:column;justify-content:flex-end;min-height:320px;overflow:visible}
.dlA .dA-jacket{position:absolute;left:50%;top:-30px;width:210px;margin-left:-105px;transform:rotate(-7deg)}
.dlA .dA-jkt{position:relative;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.dlA .dA-up{grid-column:1/13}
.dlA .dA-up .rc-drop.rc-top{margin-top:0}
/* ---------- B: scrapbook moodboard (soft paper cards overlap, stickers sit on top) ---------- */
.dlB .dB-hd{padding:46px 4px 0;text-align:center}
.dlB .dB-board{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(40px,auto);gap:0;margin-top:46px;padding-bottom:10px}
.dlB .dB-c{position:relative;background:#fff;border-radius:6px;padding:30px 30px 34px;box-shadow:0 2px 0 rgba(59,42,32,.03),0 20px 40px rgba(59,42,32,.08)}
.dlB .dB-q{grid-column:1/7;grid-row:1/4;transform:rotate(-1.6deg);z-index:2;padding-left:150px;margin-right:-20px}
.dlB .dB-penny{position:absolute;left:-26px;top:-40px;width:160px;transform:rotate(-10deg)}
.dlB .dB-jk{grid-column:7/13;grid-row:1/5;margin:34px 0 0 0;transform:rotate(2.2deg);background:#fbf4d2;z-index:1;text-align:right;padding-top:180px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.dlB .dB-jacket{position:absolute;left:24px;top:-34px;width:210px;transform:rotate(-8deg)}
.dlB .dB-how{grid-column:2/8;grid-row:4/7;margin-top:26px;transform:rotate(1deg);z-index:3}
.dlB .dB-how .dl-stats{grid-template-columns:1fr}.dlB .dB-how .dl-st{flex-direction:row;align-items:baseline;gap:12px;border-right:0;border-bottom:1px solid #ebe5df;padding:12px 0}.dlB .dB-how .dl-st+.dl-st{padding-left:0}.dlB .dB-how .dl-st:last-child{border-bottom:0}.dlB .dB-how .dl-st small{margin-left:auto}.dlB .dB-how .dl-st b{font-size:38px;min-width:48px}
.dlB .dB-money{grid-column:1/13;grid-row:7/9;margin-top:30px;transform:rotate(-.6deg);background:#fff;z-index:2}
.dlB .dB-up{grid-column:3/11;grid-row:9/10;margin-top:28px;transform:rotate(.6deg);z-index:2}
.dlB .dB-up .rc-drop.rc-top{margin-top:0}
.dlB .dsh-sec{border-radius:6px}
/* ---------- C: minimal airy single column; stickers peek off the edges ---------- */
.dlC{max-width:820px;margin:0 auto}
.dlC .dC-hd{padding:64px 0 10px;text-align:center}
.dlC .dC-s{position:relative;padding:58px 0;border-bottom:1px solid #ebe5df;text-align:center}
.dlC .dC-q .dl-qt{max-width:520px;margin-left:auto;margin-right:auto}
.dlC .dC-penny{position:absolute;left:-150px;top:34px;width:170px;transform:rotate(-9deg)}
.dlC .dC-mh{justify-content:center;gap:26px}
.dlC .dl-rings{gap:30px;margin-top:30px}
.dlC .mr-w{width:min(200px,100%)}
.dlC .dC-how .dl-stats{max-width:640px;margin:22px auto 0}
.dlC .dC-how .dl-st{align-items:center;text-align:center;padding:6px 10px}
.dlC .dC-jk{display:flex;flex-direction:column;align-items:center;gap:6px;padding:70px 0 64px}
.dlC .dC-jacket{position:absolute;right:-170px;top:22px;width:230px;transform:rotate(9deg)}
.dlC .dC-up{margin-top:46px}.dlC .dC-up .rc-drop.rc-top{margin-top:0}
.dlC .dsh-sec{background:none;box-shadow:none;padding-left:0;padding-right:0;border-radius:0;border-top:1px solid #ebe5df}
@media (max-width:1180px){.dlC .dC-penny{left:-40px;width:130px;top:-10px}.dlC .dC-jacket{right:-40px;width:170px}}
@media (prefers-reduced-motion:reduce){.dlv .mr:hover{transform:none}}
@media (max-width:900px){
  .dlv .dl-stats{grid-template-columns:1fr}.dlv .dl-st{flex-direction:row;align-items:baseline;gap:12px;border-right:0;border-bottom:1px solid #ebe5df;padding:12px 0}.dlv .dl-st+.dl-st{padding-left:0}.dlv .dl-st:last-child{border-bottom:0}.dlv .dl-st small{margin-left:auto}.dlv .dl-st b{font-size:36px;min-width:44px}
  .dlv .dl-rings{grid-template-columns:1fr 1fr;gap:10px}.dlv .mr-earn{grid-column:1/-1}.dlv .mr-w{width:128px}.dlv .mr-earn .mr-w{width:168px}
  .dlA .dA-hd,.dlB .dB-hd{padding-top:28px}
  .dlA .dA-bento{grid-template-columns:1fr;gap:18px}.dlA .dA-bento>*{grid-column:1/-1!important}
  .dlA .dA-t{padding:24px 22px;border-radius:24px}.dlA .dA-q{padding-right:118px}.dlA .dA-penny{width:112px;right:-6px;top:-22px}
  .dlA .dA-jk{min-height:0;padding-top:24px;padding-left:170px;justify-content:center}.dlA .dA-jacket{left:6px;top:-14px;margin-left:0;width:150px}
  .dlB .dB-board{display:flex;flex-direction:column;gap:30px;margin-top:40px}.dlB .dB-c,.dlB .dB-up{margin:0!important}
  .dlB .dB-q{padding-left:118px;padding-right:20px}.dlB .dB-penny{width:120px;left:-12px;top:-30px}
  .dlB .dB-jk{padding-top:150px;margin-top:24px!important}.dlB .dB-jacket{width:160px;left:14px;top:-26px}
  .dlB .dB-c{padding:24px 22px 26px}
  .dlC .dC-hd{padding-top:36px}.dlC .dC-s{padding:44px 0}
  .dlC .dC-q{padding-top:120px}.dlC .dC-penny{left:50%;margin-left:-56px;top:6px;width:112px}
  .dlC .dC-jk{padding-top:40px}.dlC .dC-jacket{position:relative;right:auto;top:auto;width:170px;margin:0 auto 10px}
}
.dshl .dsh .dlC .dsh-sec{background:none;box-shadow:none;padding-left:0;padding-right:0;border-radius:0;border-top:1px solid #ebe5df;margin-top:40px}
@media (max-width:900px){
  .dlB .dB-c.dB-q{padding-left:128px}
  .dlC .dC-q{padding-top:150px}
  .dlA .dA-jk{min-height:210px}
}
/* ===== h59: option A with square corners (Jordi's pick). Rings stay circular, iPhone switches unchanged. ===== */
.dshl .dsh.dl-a .dA-t,.dshl .dsh.dl-a .rc-drop.rc-top,.dshl .dsh.dl-a .dsh-sec,.dshl .dsh.dl-a .do-row,.dshl .dsh.dl-a .dc-card,.dshl .dsh.dl-a .rc-card,.dshl .dsh.dl-a .rc-th{border-radius:0}
/* ===== h60: square sidebar + tab-bar highlights; Penny fully visible on the orders tile (inside the clip edge, clear of the text) ===== */
.dsb-i,.dsb-i:hover,.dsb-i.on{border-radius:0}
@media (max-width:900px){.dsb-i,.dsb-i.on{border-radius:0}}
.dlA .dA-q{padding-right:180px}
.dlA .dA-penny{right:10px;top:-30px;width:150px}
@media (max-width:900px){.dlA .dA-q{padding-right:122px}.dlA .dA-penny{right:8px;top:-22px;width:104px}}
.dlA .dA-penny{right:28px}.dlA .dA-q{padding-right:196px}
@media (max-width:900px){.dlA .dA-penny{right:14px}.dlA .dA-q{padding-right:128px}}
/* ===== h61: sign-in payment pop-up + deposit step (white / cream / baby blue / deep brown only) ===== */
.paypop-bg,.dep-bg{position:fixed;inset:0;z-index:10040;background:rgba(59,42,32,.28)} /* h65: above receipt print overlay (10001) */
.paypop,.dep-modal{position:fixed;z-index:10050;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,92vw);max-height:min(88vh,720px);overflow:auto;background:#fff;border-radius:0;padding:34px 32px 28px;box-shadow:0 24px 60px rgba(59,42,32,.18)}
.paypop-hi{font:italic 300 22px/1.3 var(--serif);color:#3b2a20;margin:0 0 8px}
.paypop-h,.dep-h{font:italic 300 clamp(26px,3vw,34px)/1.1 var(--serif);color:#3b2a20;margin:0 0 18px;letter-spacing:-.01em}
.paypop-opts{display:flex;flex-direction:column;gap:10px}
.paypop-opt{all:unset;box-sizing:border-box;cursor:pointer;padding:18px 20px;background:#f8f5f0;border:1px solid #ebe5df;font:italic 400 18px var(--serif);color:#3b2a20;transition:background .2s,border-color .2s}
.paypop-opt:hover,.paypop-opt:focus-visible{background:#dde9f5;border-color:#b8d0e8}
.paypop-fine,.dep-lede,.dep-set,.dep-later,.dep-quote,.pay-note{font:400 14px/1.5 var(--sans);color:#8c7b6f;margin:14px 0 0}
.dep-set b{color:#3b2a20;font-weight:500}
.dep-pay{margin-top:16px;padding:16px 18px;background:#f8f5f0}
.dep-pay .pay-kv{margin:8px 0 0}.dep-pay .pay-note{margin:0 0 8px}
.dep-amt{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:18px 0 6px}
.dep-amt b{font:300 40px/1 var(--serif);color:#3b2a20;letter-spacing:-.02em}
.dep-amt .mono,.dep-amt small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8c7b6f}
.dep-pick{display:flex;flex-direction:column;gap:8px;margin:18px 0 10px}
.dep-opt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid #ebe5df;background:#fff;color:#3b2a20;transition:background .2s,border-color .2s}
.dep-opt i{flex:none;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #d8cec5}
.dep-opt.on{background:#dde9f5;border-color:#b8d0e8}
.dep-opt.on i{background:#3b2a20;box-shadow:inset 0 0 0 4px #fff,0 0 0 1.5px #3b2a20}
.dep-opt b{font:400 15px var(--sans)}
.dep-go{width:100%;justify-content:center;margin-top:12px}
.dep-go[disabled]{opacity:.4;cursor:default}
.dep-x{all:unset;cursor:pointer;position:absolute;top:14px;right:14px;width:34px;height:34px;display:grid;place-items:center;background:#f8f5f0;color:#3b2a20}
.dep-modal{position:fixed}
.co-deposit{margin:22px 0;padding:0;border:0;background:none}
.co-deposit .depstep{padding:28px 26px;background:#fff;border:1px solid #ebe5df}
.os-pay{justify-self:start;padding:5px 10px;border:1px solid #3b2a20;font:400 11px var(--sans);color:#3b2a20;white-space:nowrap;letter-spacing:.04em}
.os-row{grid-template-columns:minmax(0,1.3fr) minmax(0,1.4fr) auto auto 96px}
/* h71: scoped — the global rule (60dcbb8) restyled the homepage "Write me a note →" / "Start a custom request →" links */
.dep-set .txtlink,.paypop .txtlink,.dep-modal .txtlink{all:unset;cursor:pointer;color:#3b2a20;text-decoration:underline;text-underline-offset:3px;font:400 14px var(--sans)}
@media (max-width:760px){
  .paypop,.dep-modal{top:auto;bottom:0;left:0;right:0;transform:none;width:100%;max-height:90vh;padding:28px 20px 32px;border-radius:0}
  .os-row{grid-template-columns:1fr auto}.os-pay{grid-column:1/-1;justify-self:start;order:4}
}
aside.paypop>button.pbk,aside.dep-modal>button.pbk{display:none!important}
/* ===== h62: currency pop-up — circle icons (raster maple leaf + US flag), currency wording ===== */
.paypop-mid{font:400 15px/1.45 var(--sans);color:#8c7b6f;margin:0 0 18px}
.paypop-opts{gap:12px}
.paypop-opt{display:flex;align-items:center;gap:14px;padding:14px 16px;text-align:left}
.paypop-opt b{font:italic 400 17px var(--serif)}
.paypop-ic{flex:none;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid #d8cec5;display:grid;place-items:center;overflow:hidden}
.paypop-ic img{width:22px;height:22px;object-fit:contain;display:block}
.paypop-opt[data-paypick="US"] .paypop-ic img{width:26px;height:auto}

/* ===== h62b: lean deposit + paypop baby bear ===== */
.paypop-hirow{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.paypop-hirow .paypop-hi{margin:0;flex:1;min-width:0}
.paypop-bear{flex:none;width:56px;height:56px;object-fit:contain;display:block;filter:drop-shadow(0 2px 4px rgba(59,42,32,.12))}
.depstep-lean{padding:4px 0 0}
.depstep-lean .dep-h{margin-bottom:8px}
.depstep-lean .dep-lede{margin:0 0 14px;font-size:15px;line-height:1.4}
.dep-chip{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#f8f5f0;border:1px solid #ebe5df;margin:0 0 14px}
.dep-ic{flex:none;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid #d8cec5;display:grid;place-items:center;overflow:hidden}
.dep-ic img{width:18px;height:18px;object-fit:contain;display:block}
.dep-chip .dep-ic img[src*="flag-us"]{width:20px;height:auto}
.dep-chip-txt{flex:1;min-width:0;font:400 13px/1.35 var(--sans);color:#5c4a3e}
.dep-chip-txt b{font-weight:600;color:#3b2a20}
.dep-chip-sw{all:unset;cursor:pointer;flex:none;font:500 12px var(--sans);color:#3b2a20;text-decoration:underline;padding:4px 2px}
.dep-paylean{margin:0 0 14px;padding:0}
.dep-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 6px;font:400 14px/1.4 var(--sans);color:#3b2a20}
.dep-k{color:#8c7b6f;min-width:5.5em}
.dep-v{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.depstep-lean .dep-amt{display:block;margin:4px 0 10px}
.dep-amt-lbl{font:400 16px/1.3 var(--sans);color:#3b2a20}
.dep-amt-lbl b{font:300 28px/1.1 var(--serif);letter-spacing:-.02em;margin-left:4px}
.dep-rush-tag{font:400 13px var(--sans);color:#8c7b6f;margin-left:4px}
.dep-off{display:block;margin-top:4px;font:400 12px/1.3 var(--sans);color:#8c7b6f;letter-spacing:0;text-transform:none}
.dep-notify{font:400 14px/1.45 var(--sans);color:#5c4a3e;margin:0 0 12px}
.dep-time{font:400 14px/1.4 var(--sans);color:#3b2a20;margin:0 0 10px}
.dep-needby{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:400 13px var(--sans);color:#5c4a3e}
.dep-needby input[type=date]{font:400 14px var(--sans);padding:6px 8px;border:1px solid #d8cec5;background:#fff;color:#3b2a20}
.depstep-lean .dep-go{margin-top:8px}
.depstep-lean .dep-pick{display:none} /* payChoice flag off */
.depstep-lean.dep-haspick .dep-pick{display:flex;flex-direction:row;gap:8px;margin:0 0 16px}
.depstep-lean.dep-haspick .dep-opt{flex:1;padding:12px 10px;justify-content:center}
.depstep-lean.dep-haspick .dep-opt b{font:500 14px var(--sans)}
.depstep-lean.dep-haspick .dep-opt i,.depstep-lean.dep-haspick .dep-opt span,.depstep-lean.dep-haspick .dep-opt b{pointer-events:none}
.depstep-lean.dep-haspick .dep-later{display:none} /* h65: no paragraphs */
@media (max-width:520px){
  .paypop-bear{width:48px;height:48px}
  .dep-chip{padding:8px 10px}
  .dep-amt-lbl b{font-size:24px}
}
.depstep-lean .dep-amt small.dep-off,.depstep-lean .dep-off{text-transform:none!important;letter-spacing:0!important;font-size:12px!important;display:block}
.depstep-lean .dep-rush-tag{text-transform:none!important;letter-spacing:0!important;font:400 13px var(--sans)!important;color:#8c7b6f}

/* ===== h63: non-blocking currency card + bare deposit ===== */
.paypop-bg{display:none!important} /* never dim the page for currency */
.paypop.paypop-card{position:fixed;z-index:180;left:auto;right:20px;top:auto;bottom:20px;transform:none;width:min(340px,calc(100vw - 24px));max-height:min(70vh,520px);overflow:auto;padding:18px 16px 16px;background:#fff;border:1px solid #ebe5df;box-shadow:0 12px 36px rgba(59,42,32,.16);border-radius:0;animation:paypopIn .35s ease-out}
@keyframes paypopIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.paypop-x{all:unset;cursor:pointer;position:absolute;top:8px;right:10px;width:28px;height:28px;display:grid;place-items:center;font:400 20px/1 var(--sans);color:#8c7b6f}
.paypop-x:hover{color:#3b2a20}
.paypop-card .paypop-hirow{gap:8px;margin:0 0 6px;padding-right:24px}
.paypop-card .paypop-bear{width:44px;height:44px}
.paypop-card .paypop-hi{font:italic 300 17px/1.25 var(--serif);margin:0}
.paypop-card .paypop-mid{font:400 12.5px/1.4 var(--sans);color:#8c7b6f;margin:0 0 10px}
.paypop-card .paypop-h{font:italic 300 20px/1.15 var(--serif);margin:0 0 8px}
.paypop-card .paypop-opts{gap:6px}
.paypop-card .paypop-opt{padding:8px 10px;gap:10px}
.paypop-card .paypop-opt b{font:italic 400 14px var(--serif)}
.paypop-card .paypop-ic{width:28px;height:28px}
.paypop-card .paypop-ic img{width:16px;height:16px}
.paypop-card .paypop-opt[data-paypick="US"] .paypop-ic img{width:18px}
.paypop-card .paypop-fine{font:400 11.5px/1.4 var(--sans);margin:10px 0 0;color:#8c7b6f}
.paypop-bye{font:400 12.5px/1.45 var(--sans);color:#5c4a3e;margin:12px 0 0}
.depstep-min .dep-h{font:italic 300 clamp(22px,3vw,28px)/1.15 var(--serif);margin:0 0 12px}
.dep-chip-short{display:flex;align-items:center;gap:8px;padding:8px 10px;margin:0 0 10px}
.dep-chip-short .dep-chip-lbl{flex:1;font:500 14px/1.2 var(--sans);color:#3b2a20}
.depstep-min .dep-paylean{margin:0 0 14px}
.depstep-min .dep-row{margin:0 0 4px;font-size:13px}
.dep-oneline{font:400 16px/1.35 var(--sans);color:#3b2a20;margin:0 0 18px}
.depstep-min .dep-go{margin-top:2px}
.depstep-min .dep-lede,.depstep-min .dep-notify,.depstep-min .dep-time,.depstep-min .dep-needby,.depstep-min .dep-amt{display:none}
@media (max-width:640px){
  .paypop.paypop-card{left:10px;right:10px;bottom:10px;width:auto;max-height:55vh;padding:14px 14px 12px;box-shadow:0 8px 28px rgba(59,42,32,.18)}
  .paypop-card .paypop-bear{width:40px;height:40px}
}

/* ===== h63b: currency on sign-in/settings; cute lean deposit ===== */
.cur-ask{margin:18px 0 22px;padding:16px 16px 14px;background:#fff;border:1px solid #ebe5df}
.cur-ask .paypop-hirow{margin:0 0 8px}
.cur-ask .paypop-hi{font:italic 300 20px/1.25 var(--serif);margin:0}
.cur-ask .paypop-bear{width:48px;height:48px}
.cur-ask .paypop-mid{font:400 13px/1.4 var(--sans);color:#8c7b6f;margin:0 0 10px}
.cur-ask .paypop-h{font:italic 300 22px/1.15 var(--serif);margin:0 0 10px}
.cur-ask .paypop-opts{gap:6px}
.cur-ask .paypop-opt{padding:10px 12px;gap:10px;display:flex;align-items:center;text-align:left}
.cur-ask .paypop-opt b{font:italic 400 15px var(--serif)}
.cur-ask .paypop-opt.on{background:#dde9f5;border-color:#b8d0e8}
.cur-ask .paypop-ic{width:30px;height:30px}
.cur-ask .paypop-ic img{width:16px;height:16px}
.cur-ask .paypop-fine{font:400 12px/1.4 var(--sans);margin:10px 0 0}
.cur-ask .paypop-bye{font:400 13px/1.45 var(--sans);color:#5c4a3e;margin:12px 0 0}
.fileauth .cur-ask{max-width:420px}
.dep-hirow{display:flex;align-items:center;gap:12px;margin:0 0 6px}
.dep-hirow .dep-h{margin:0;flex:1;min-width:0}
.dep-bear{flex:none;width:52px;height:52px;object-fit:contain;display:block;filter:drop-shadow(0 2px 4px rgba(59,42,32,.12))}
.depstep-min .dep-lede{display:block!important;margin:0 0 12px;font:400 14px/1.4 var(--sans);color:#8c7b6f}
@media (max-width:520px){
  .dep-bear{width:44px;height:44px}
  .cur-ask{padding:14px 12px}
}
/* h63b spacing fix: air between pay row → amount → send */
.depstep-min .dep-paylean{margin-bottom:14px!important}
.depstep-min .dep-oneline{margin:0 0 20px!important}
.depstep-min .dep-go{margin-top:0!important}

/* h64: board deposit note near Q1 — small, cute, non-blocking */
.b3.b3 .b3-depnote{width:100%;max-width:580px;box-sizing:border-box;margin:0 auto 2px;padding:10px 14px;background:#dde9f5;border:1px solid #c5d8ec;border-radius:2px}
.b3.b3 .b3-depnote p{margin:0;font:400 13px/1.45 var(--sans);color:#3b2a20;text-align:left}
.b3.b3 .fcard.oq ~ .b3-depnote,.b3.b3 .b3-depnote + .fcard{/* note sits above first question */}
@media (max-width:860px){
  .b3.b3 .b3-depnote{padding:9px 12px}
  .b3.b3 .b3-depnote p{font-size:12px;line-height:1.4}
}
@media (min-width:861px){
  .b3.b3:not(.b3-col) .b3-depnote{max-width:none}
}

/* h65: piece cut-outs + board deposit pin */
.b3.b3 .stk-pic,.b3.b3 .opt .stk-pic{display:block;width:72px;height:72px;object-fit:contain;margin:0 auto 8px;filter:drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(1px 3px 5px rgba(0,0,0,.18))}
.b3.b3 .opt .stk-pic{width:64px;height:64px}
.b3.b3 .stk-ic svg,.b3.b3 .pc-ic svg{width:48px;height:42px}
.b3.b3 .b3-depnote{display:none} /* banner off; deposit lives on the board pin */
.b3.b3 .b3-deppin{position:absolute;right:5%;bottom:12%;z-index:5;width:clamp(148px,16vw,200px);box-sizing:border-box;padding:14px 12px 12px;background:#fffef8;color:#3b2a20;font:400 13px/1.35 var(--serif);font-style:italic;text-align:center;transform:rotate(3.5deg);box-shadow:1px 6px 16px rgba(0,0,0,.16);border:1px solid rgba(27,27,27,.06)}
.b3.b3 .b3-deppin-dot{position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:10px;height:10px;background:var(--red,#c8382f);border-radius:50%;box-shadow:0 2px 3px rgba(0,0,0,.3)}
.b3.b3 .b3-deppin p{margin:0;font:inherit;color:inherit}
.b3.b3.b3-hero .b3-deppin{right:6%;bottom:18%;width:clamp(140px,14vw,180px);font-size:12px}
@media(max-width:860px){
  .b3.b3 .stk-pic{width:56px;height:56px;margin-bottom:6px}
  .b3.b3 .b3-deppin{right:8px;bottom:8px;width:118px;padding:10px 8px;font-size:11px;line-height:1.3}
}

/* h66: vision-board pins — raster cut-outs for pieces, text-only pinned cards for answers (outline icons only with flags.boardPieceOutlineIcons) */
.b3.b3 .pin-cut{display:block;width:64px;height:64px;object-fit:contain;margin:0 auto 3px;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(1px 3px 5px rgba(0,0,0,.2))}
.b3.b3 .pin.pin-txt{padding:15px 10px 11px}
.b3.b3 .pin.pin-txt .pin-lb{margin-bottom:3px}
.b3.b3 .pin.pin-txt .pin-v{font-size:17px;text-shadow:none}
.b3.b3 .b3-demo .pin.pin-txt{min-width:110px}
/* h66: deposit pin sits IN the board flow (never on top of pins / the empty copy) */
.b3.b3 .b3-deppin.b3-deppin-flow{position:relative;right:auto;bottom:auto;display:block;margin:22px 6% 18px auto;z-index:1}
.b3.b3 .b3-deppin.b3-deppin-top{margin:12px 4% 22px auto}
.b3.b3 .b3-empty3 + .b3-deppin-flow{margin:26px auto 18px;transform:rotate(2.5deg)}
.b3.b3 .b3-deppin.b3-deppin-h{animation:b3depin .5s cubic-bezier(.34,1.56,.64,1) var(--de,0s) both}
@keyframes b3depin{0%{opacity:0;transform:rotate(3.5deg) scale(.9)}100%{opacity:1;transform:rotate(3.5deg) scale(1)}}
@media(max-width:860px){
  .b3.b3 .pin-cut{width:50px;height:50px}
  .b3.b3 .pin.pin-txt .pin-v{font-size:15px}
  .b3.b3 .b3-deppin.b3-deppin-flow{width:min(220px,70%);margin:16px 12px 14px auto;font-size:12px}
  .b3.b3 .b3-empty3 + .b3-deppin-flow{margin:18px auto 12px}
}
/* h66: receipt base type = hers (body 14px, normal line-height) so header/rows/total/buttons size like her print-off */
.b3.b3 .receipt-paper{font-size:14px;line-height:normal}
/* h66: mobile landing board — deposit pin in the empty top-right corner (sticky is top-left), clear of the empty copy + calculator */
@media(max-width:860px){
  .b3.b3.b3-hero .b3-deppin.b3-deppin-h{top:12px;right:10px;bottom:auto;left:auto;width:150px;padding:10px 8px;font-size:11px;line-height:1.3}
}
/* h67: after Start the question column is visible immediately (slide only, no fade from 0 — a throttled/instant frame never shows an empty column) */
@keyframes b3feedin2{0%{transform:translateX(-24px)}100%{transform:none}}
@media(min-width:861px){ .b3.b3.b3-enter:not(.b3-col) .ql{animation:b3feedin2 .5s cubic-bezier(.22,.8,.24,1) both;opacity:1} }
/* h67: short inline "pick one" message above the send button */
.dep-err{margin:-2px 0 10px;min-height:0;font:500 12.5px/1.35 var(--sans);color:#8a3b2a;text-align:center}
.dep-err:empty{display:none}
.dep-err.shake{animation:deperr .32s ease}
@keyframes deperr{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* ---- h67 option A: home mascot marbles (SEED.homeMascots = 'marbles'); positions + spin set per scroll frame by mqStep() ---- */
.mq{position:absolute;inset:0;pointer-events:none;z-index:9}
.mq-wr{z-index:6}
.mq-b{position:absolute;left:0;top:0;display:block;aspect-ratio:1;border-radius:50%;pointer-events:auto;text-decoration:none;will-change:transform;box-shadow:0 5px 10px rgba(40,30,10,.22);transition:box-shadow .2s,filter .2s}
.mq:not(.ready) .mq-b{visibility:hidden}
.mq-in{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 38%,#fffdf8 0%,#f7f0e1 70%,#efe5d0 100%);border:3px solid #fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);will-change:transform}
.mq-wr .mq-in{border-width:2px}
.mq-in img{display:block;width:84%;height:84%;margin:8%;object-fit:contain;pointer-events:none;user-select:none}
.mq-b:hover{z-index:20!important;filter:brightness(1.04);box-shadow:0 7px 14px rgba(40,30,10,.28),0 0 0 3px #8db9f4}
.mq-b:focus-visible{outline:2px solid #8db9f4;outline-offset:3px}
/* ---- h67 item 1: desktop-only white hover boxes on Jordi's photo (face → About me, brown jacket → project) ---- */
.jh-crop>.jh-hb{position:absolute;left:calc((var(--x) - var(--x0)) / var(--w0) * 100%);top:calc((var(--y) - var(--y0)) / var(--h0) * 100%);width:calc(var(--w) / var(--w0) * 100%);height:calc(var(--h) / var(--h0) * 100%);z-index:5;display:block;border-radius:14px;text-decoration:none;cursor:pointer}
.jh-hb:before{content:"";position:absolute;inset:0;border:3px solid #fff;border-radius:inherit;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 6px 18px rgba(0,0,0,.10);opacity:0;transform:scale(.97);transition:opacity .22s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.jh-hb-tab{position:absolute;left:50%;transform:translate(-50%,4px);white-space:nowrap;background:rgba(48,48,48,.92);color:#fff;font:600 12.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:9px 13px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.jh-hb.tab-top .jh-hb-tab{bottom:calc(100% + 9px)}
.jh-hb.tab-bot .jh-hb-tab{top:calc(100% + 9px)}
.jh-hb:hover:before,.jh-hb:focus-visible:before{opacity:1;transform:none}
.jh-hb:hover .jh-hb-tab,.jh-hb:focus-visible .jh-hb-tab{opacity:1;transform:translate(-50%,0)}
.jh-hb:focus-visible{outline:none}
@media (max-width:760px),(hover:none) and (pointer:coarse){.jh-crop>.jh-hb{display:none}}  /* phones/tablets: no boxes */
@media (prefers-reduced-motion:reduce){.jh-hb:before,.jh-hb-tab{transition:opacity .15s}}
/* h68: timeline hanging tags = clean text tags (label + sub-line); outline icons only with flags.boardPieceOutlineIcons */
.b3.b3 .htbody:not(:has(.htic)){padding:26px 10px 16px}
.b3.b3 .htbody:not(:has(.htic)) .htsub{margin-top:5px}
/* ---- h67 option B: Jordi's mascot sketch video (SEED.homeMascots = 'video'), same mid-hero spot as option A's cluster ---- */
.mv{position:absolute;aspect-ratio:720/438;transform:translate(-50%,-50%);pointer-events:none;z-index:6}
.mv-jh{left:47.5%;top:82.3%;width:22.5%}  /* centre on the floor between the mannequin base and the CTAs (image x .475, y .84), clear of the CTA buttons */
.mv-wr{left:50%;top:62.6%;width:58%;z-index:2}  /* phone: middle of the rack scene, under the jackets (tags + chat bubble stay on top) */
.mv-v{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 6%,#000 17%,#000 83%,rgba(0,0,0,.35) 94%,transparent 100%),linear-gradient(180deg,transparent 0,rgba(0,0,0,.4) 4%,#000 11%,#000 82%,rgba(0,0,0,.35) 93%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 6%,#000 17%,#000 83%,rgba(0,0,0,.35) 94%,transparent 100%),linear-gradient(180deg,transparent 0,rgba(0,0,0,.4) 4%,#000 11%,#000 82%,rgba(0,0,0,.35) 93%,transparent 100%);
  mask-composite:intersect}
.mv-hit{position:absolute;inset:14% 18%;pointer-events:auto;border-radius:24px}
.mv-hit:focus-visible{outline:2px solid #8db9f4;outline-offset:2px}
/* h70 (t473): deposit note only on the landing board. Desktop: bottom-left corner of the board, clear of the sticky, the bare-board copy, the plus, the arrow,
   the calculator and every demo pin spot (it pops in after the demo pins are gone). Phone keeps the approved h66 top-right corner. */
@media(min-width:861px){ .b3.b3.b3-hero .b3-deppin.b3-deppin-hero{right:auto;left:2.5%;bottom:7%;top:auto;width:clamp(140px,12.5vw,180px)} }
/* h70 (Jordi): desktop hero — playoff note's arrow aimed at the Ottawa jacket (lower + turned a little clockwise so the head lands on it) */
.jh-crop>.jh-po.rn-l .rn-arr{left:calc(100% - 16px);top:85%;width:5.8vw;transform:none}
/* h70 (Jordi): option B video on the right under the CTAs (was in front of the mannequin base), 20% smaller (22.5% → 18%) */
.mv-jh{left:50%;top:84.4%;width:15.5%}  /* h70 12:08: centre of the hero floor like the marble pile; h71: lifted clear of the film strip */
/* h71 (Jordi): home "two ways" pins = real cut-outs, no white tiles/pillows, nothing cropped */
.pt-img.pins.pins-cut img{aspect-ratio:auto;height:auto;max-height:100%;object-fit:contain;background:none;border:0;box-shadow:none;filter:drop-shadow(0 10px 12px rgba(0,0,0,.16))}
.pt-img>img{max-width:86%}
/* h71 (Jordi): rink scene full-bleed — no frame, rounded card, shadow or edge around it */
.rink-sec.rk-scene{padding:0;background:none}
.rink-sec.rk-scene>.wrap{max-width:none;padding:0}
.rink-sec.rk-scene .rk-frame{max-width:none;border-radius:0;box-shadow:none;background:none}
/* h71 (Jordi): "Meet the mascots" spread across the full width (were bunched on the left) */
@media (min-width:901px){ .parade .pr-track{justify-content:space-between} }
/* ===== h71 (Jordi, Oct 19 12:39 PM): back chevron below the nav bar, no word, left; sticks under the nav, takes no room ===== */
.pgback{position:sticky;top:var(--hdrh,62px);z-index:39;height:0}
.pgback .wrap{position:relative}
.pgback .pgbk{position:absolute;top:6px;left:calc(var(--pad) - 10px);width:34px;height:34px;padding:0;border:0;background:none;display:grid;place-items:center;color:var(--ink);cursor:pointer}
.pgback .pgbk svg{width:22px;height:22px;display:block}
.pgback .pgbk:hover{opacity:.6}
/* ===== h71 Custom menu (Jordi, Oct 19 12:47 PM) ===== */
/* Custom: tap/click opens the menu (hover still does on desktop) */
.navshop.navcust.open .dd{opacity:1;visibility:visible}
.navshop.navshop1.open .dd{opacity:1;visibility:visible}  /* shopNavDropdown1021: click-open like Custom */
/* /shop: Shop by category more compact at the top */
.cats.cats-first.cats-compact{padding-top:clamp(22px,2.6vw,36px);padding-bottom:10px}
.cats-compact .cats-hd h2.title{margin-bottom:10px;font-size:clamp(30px,3.6vw,48px)}
.cats-first.cats-compact .cat-loop.cat-big .cat-track>.cat{min-height:clamp(220px,21vw,300px)}
@media (max-width:760px){.cats-first.cats-compact .cat-loop.cat-big .cat-track>.cat{min-height:200px}}
/* /shop: 'Want something customized?' banner, condensed, after the categories */
.tw.tw-shop{padding:calc(var(--u) * 22) 0 calc(var(--u) * 14)}
.tw-shop .tw-top{height:calc(var(--u) * 104)}
.tw-shop .tw-big{font-size:calc(var(--u) * 104);top:calc(var(--u) * -24)}
.tw-shop .tw-head{padding-top:calc(var(--u) * 14)}
.tw-shop .tw-cards li{min-height:calc(var(--u) * 112);padding-top:calc(var(--u) * 18);padding-bottom:calc(var(--u) * 14)}
.tw-shop .tw-n{margin-bottom:calc(var(--u) * 10)}
@media (max-width:760px){.tw.tw-shop{padding:22px 0 14px}.tw-shop .tw-big{font-size:76px}.tw-shop .tw-top{margin-bottom:16px}}
/* /request: the approved steps above the board */
.tw.tw-req{padding-bottom:calc(var(--u) * 24)}
/* How to: rink sits right on the page background — no padding, no black, no white box */
body.ht-page, body.ht-page main, .ht, .ht-box, .ht-box iframe{background:var(--paper)}
.ht{padding:0;margin:0}
.ht + .tw{background:var(--paper)}
/* her chat bubble on the How to steps, right side across from the 4 (same bubble, placed only) */
.tw-top>.wr-chat.tw-chat{top:calc(var(--u) * 6);right:0;bottom:auto;left:auto}
@media (max-width:760px){.tw-top>.wr-chat.tw-chat{position:relative;top:auto;right:auto;grid-column:1/-1;justify-self:end;margin-top:18px;width:min(240px,70vw)}}
.menu.open ~ .pgback{visibility:hidden}  /* the page back chevron never sits on top of the open phone menu */

/* ===== Order board, Oct 19 BUILD ROUND (Jordi 2:24–2:41 PM): her logic on our approved board look ===== */
/* questions centred again: her centred ~580 card (undoes the full-width bbf7382 + left-aligned 2a02a59 look) */
.b3.b3.b3 .feed{align-items:center}
.b3.b3.b3 .fcard{width:100%;max-width:580px;margin-left:auto;margin-right:auto;box-sizing:border-box}
.b3.b3.b3 .fcard.oq .oq-head{justify-content:center;text-align:center}
.b3.b3.b3 .fcard.oq .oq-txt{text-align:center}
.b3.b3.b3 .fcard .fq-title{text-align:center}
.b3.b3.b3 .fcard .fq-hint{text-align:center}
.b3.b3.b3 .fcard > .fbtn,.b3.b3.b3 .fcard .b3-fus > .fbtn{display:flex;margin:16px auto 0}
.b3.b3.b3 .fbtn[disabled]{opacity:.35;cursor:not-allowed;filter:grayscale(1)}
/* bigger explanation text */
.b3.b3.b3 .opt-sub,.b3.b3.b3 .stk-sub,.b3.b3.b3 .htsub,.b3.b3.b3 .fq-hint,.b3.b3.b3 .pg-leg,.b3.b3.b3 .fnote{font-size:12.5px;line-height:1.45}
.b3.b3.b3 .stk-sub,.b3.b3.b3 .htsub{font-family:var(--mono);letter-spacing:.03em}
/* Who is it for? — two whole-card buttons side by side (Jordi 2:28 PM) */
.b3.b3.b3 .b3-who2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.b3.b3.b3 .b3-whoc{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:20px 14px 18px;min-height:150px;cursor:pointer}
.b3.b3.b3 .b3-whoic{color:var(--ink);margin-bottom:10px}.b3.b3.b3 .b3-whoic svg{height:34px;width:auto}
.b3.b3.b3 .b3-whoc .opt-name{font-size:19px;margin-bottom:4px}
.b3.b3.b3 .b3-whos2{margin-top:6px;font-style:italic;color:var(--ink2)}
/* occasion icons + typed name with the right arrow */
.b3.b3.b3 .b3-occic{color:var(--ink);margin-bottom:6px}.b3.b3.b3 .b3-occic svg{height:24px;width:auto}
.b3.b3.b3 .b3-occin{display:flex;gap:8px;align-items:center;margin-top:14px}
.b3.b3.b3 .b3-occin .field-input{flex:1;margin:0}
.b3.b3.b3 .b3-occgo{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer}
.b3.b3.b3 .b3-occgo svg{width:20px;height:20px}.b3.b3.b3 .b3-occgo[disabled]{opacity:.3;cursor:not-allowed}
.b3.b3.b3 .b3-tldate{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
/* question bank options + follow-ups */
.b3.b3.b3 .b3-qlist{display:flex;flex-direction:column;gap:8px}
.b3.b3.b3 .b3-qo .opt{width:100%;text-align:left;padding:12px 14px}
.b3.b3.b3 .b3-qo .opt.locked{cursor:default}
.b3.b3.b3 .b3-pr{font-family:var(--mono);font-size:11px;color:var(--mute);font-weight:400;margin-left:4px}
.b3.b3.b3 .b3-wt{background:none;border:0;padding:4px 2px 0;font:500 12px var(--mono);color:var(--ink2);text-decoration:underline;cursor:pointer}
.b3.b3.b3 .b3-blurb{font-size:13px;color:var(--ink2);line-height:1.5;padding:6px 4px 2px}
.b3.b3.b3 .b3-fus{margin:10px 2px 4px;display:flex;flex-direction:column;gap:8px}
.b3.b3.b3 .b3-fus .field-input,.b3.b3.b3 .b3-fus .field-textarea{margin:0}
.b3.b3.b3 .b3-qty{flex-direction:row;align-items:center;gap:10px}
.b3.b3.b3 .b3-qtyn{font:600 16px var(--mono);min-width:22px;text-align:center}
.b3.b3.b3 .b3-meth{margin:8px 2px 2px}.b3.b3.b3 .b3-meth .pillrow{gap:6px}
.b3.b3.b3 .b3-ack{display:flex;gap:10px;align-items:flex-start;margin:12px 2px 4px;padding:12px 14px;background:#fff7d6;border:1.5px solid var(--ink);border-radius:10px;font-size:13.5px;line-height:1.45;cursor:pointer;text-align:left}
.b3.b3.b3 .b3-ack input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:#2f8a4e}
.b3.b3.b3 .b3-skipic{color:var(--ink)}.b3.b3.b3 .b3-skipic svg{height:56px;width:auto}
/* references: own scroll area, 3–4 big pins across, all the Bedard tile size on a grey backing (shop .pgrid no longer leaks in) */
.b3.b3.b3 .b3-refs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-height:min(72vh,760px);overflow-y:auto;padding:4px 6px 10px 2px;overscroll-behavior:contain}
@media(min-width:1500px){.b3.b3.b3 .b3-refs{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:860px){.b3.b3.b3 .b3-refs{grid-template-columns:repeat(2,minmax(0,1fr));max-height:70vh}}
.b3.b3.b3 .b3-rt{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,.08);display:flex;flex-direction:column}
.b3.b3.b3 .b3-rt.on{box-shadow:0 0 0 2.5px #2f8a4e,0 4px 14px rgba(0,0,0,.1)}
.b3.b3.b3 .b3-rt-img{position:relative;aspect-ratio:1291/1600;background:#ececea;cursor:pointer}
.b3.b3.b3 .b3-rt-img img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;display:block}
.b3.b3.b3 .b3-rt-tick{position:absolute;top:8px;left:8px;width:28px;height:28px;border-radius:50%;background:#2f8a4e;color:#fff;display:grid;place-items:center}.b3.b3.b3 .b3-rt-tick svg{width:16px;height:16px}
.b3.b3.b3 .b3-rt-note{position:absolute;bottom:8px;left:8px;font-size:13px}
.b3.b3.b3 .b3-bm{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.95);color:transparent;display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.b3.b3.b3 .b3-bm svg{width:13px;height:16px;stroke:var(--ink);fill:transparent}.b3.b3.b3 .b3-bm.on svg{fill:var(--ink)}
.b3.b3.b3 .b3-rt .ptile-cap{font-size:13.5px}.b3.b3.b3 .b3-rt .ptile-desc{font-size:13px}
.b3.b3.b3 .b3-rt-act{display:flex;flex-direction:column;gap:6px;padding:8px 9px 10px;margin-top:auto}
.b3.b3.b3 .b3-want,.b3.b3.b3 .b3-edit{display:flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid var(--ink);background:#fff;border-radius:999px;padding:7px 8px;font:600 12.5px var(--sans);color:var(--ink);cursor:pointer}
.b3.b3.b3 .b3-want .b3-tk{width:18px;height:18px;border-radius:50%;border:1.5px solid #2f8a4e;color:transparent;display:grid;place-items:center;flex:none}.b3.b3.b3 .b3-want .b3-tk svg{width:12px;height:12px}
.b3.b3.b3 .b3-want.on{background:#2f8a4e;border-color:#2f8a4e;color:#fff}.b3.b3.b3 .b3-want.on .b3-tk{background:#fff;color:#2f8a4e;border-color:#fff}
.b3.b3.b3 .b3-edit.on{background:var(--ink);color:#fff}
.b3.b3.b3 .pv-level.b3-want,.b3.b3.b3 .pv-level.b3-edit{flex:1}
/* board controls: back chevron + Clear Board / Start Again (always visible), clear of the VISION BOARD header */
.b3.b3.b3 .b3-ctl{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px 0;position:relative;z-index:6}
.b3.b3.b3 .b3-back{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer}.b3.b3.b3 .b3-back svg{width:9px;height:15px}
.b3.b3.b3 .b3-clear{border:1.5px solid var(--ink);background:#fff;border-radius:999px;padding:7px 14px;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);cursor:pointer}
/* every pin has an × */
.b3.b3.b3 .vb > *{position:absolute}
.b3.b3.b3 .pin-x{position:absolute;top:-9px;right:-9px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;color:var(--ink);display:grid;place-items:center;padding:0;cursor:pointer;z-index:4;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.b3.b3.b3 .pin-x svg{width:10px;height:10px}
.b3.b3.b3 .pin-x:hover{background:var(--ink);color:#fff}
.b3.b3.b3 .pin.pin-icn .pin-ic{margin-bottom:6px}.b3.b3.b3 .pin.pin-icn .pin-ic svg{height:24px}
/* timeline pins = her hang-tag stickers (Urgent = race car reading 'Urgent') */
.b3.b3.b3 .b3-tagpin{background:#fff;border:1.5px solid var(--ink);border-radius:10px 10px 14px 14px;padding:22px 14px 12px;min-width:92px;text-align:center;transform:rotate(var(--r,0deg));box-shadow:0 3px 8px rgba(0,0,0,.12)}
.b3.b3.b3 .b3-tagpin .htcord{position:absolute;top:-24px;left:50%;width:26px;height:24px;transform:translateX(-50%);color:var(--ink)}
.b3.b3.b3 .b3-tagpin::before{content:'';position:absolute;top:8px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper2,#f3f1ed)}
.b3.b3.b3 .b3-tagpin .htic svg{height:26px;width:auto}
.b3.b3.b3 .b3-tagpin .htname{font:700 15px var(--sans);margin-top:4px}
.b3.b3.b3 .b3-tagpin.urgent{background:#fff1ee}
/* timeline date picker */
.b3.b3.b3 .b3-cal{max-width:360px;text-align:center}
.b3.b3.b3 .b3-cal-tag{display:inline-flex;flex-direction:column;align-items:center;margin-bottom:6px}.b3.b3.b3 .b3-cal-tag .htcord{width:22px;height:20px}.b3.b3.b3 .b3-cal-tag .htic svg{height:26px;width:auto}
.b3.b3.b3 .b3-cal-hd{display:flex;align-items:center;justify-content:space-between;margin:10px 0 6px;font:600 15px var(--sans)}
.b3.b3.b3 .b3-cal-nav{width:34px;height:34px;border-radius:50%;border:1px solid var(--bm);background:#fff;font-size:18px;cursor:pointer}
.b3.b3.b3 .b3-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:10px}
.b3.b3.b3 .b3-cal-grid i{font:600 11px var(--mono);color:var(--mute);font-style:normal;padding:4px 0}
.b3.b3.b3 .b3-day{aspect-ratio:1;border:1px solid transparent;border-radius:50%;background:none;font:500 13px var(--sans);cursor:pointer}
.b3.b3.b3 .b3-day:hover:not([disabled]){border-color:var(--ink)}
.b3.b3.b3 .b3-day.on{background:var(--ink);color:#fff}.b3.b3.b3 .b3-day[disabled]{opacity:.25;cursor:default}
.b3.b3.b3 .b3-cal .fbtn{width:100%;margin-top:6px}
.b3.b3.b3 .b3-photo{display:flex;align-items:center;gap:10px}.b3.b3.b3 .b3-photo img{width:90px;height:90px;object-fit:cover;border-radius:8px}
/* /request: the page chevron scrolls away with the page (the board has its own back chevron), so it never sits on the VISION BOARD header (1:27 PM 1c) */
.pgback:has(+ main .b3){position:relative;top:auto}
.b3.b3.b3 .b3-tagpin{background:none;border:0;box-shadow:none;padding:18px 0 0;min-width:0}
.b3.b3.b3 .b3-tagpin::before{display:none}
.b3.b3.b3 .b3-tagpin .htcord{top:-6px}
.b3.b3.b3 .b3-tagpin .pin-x{top:10px;right:-10px}

/* ===== HERO TOOL INTRO (preview, not approved) — Jordi t607/t608, Oct 19 2026. Only used when flags.heroToolIntro / ?intro=tool
   adds these classes (see htiSetup in app.js); with the flag off none of these selectors match anything. ===== */
.hti-wait .jh-g,.hti-wait .wr-g,.hti-wait .wr-tag{visibility:hidden}
.jh-j.hti-fly,.wr-j.hti-fly{z-index:40!important;pointer-events:none}
.hti-fly .jh-g,.hti-fly .wr-g,.hti-fly .wr-tag{transition:none!important;animation:none!important}
.hti-fly .jh-hook,.hti-fly .wr-hook,.hti-fly .wr-tag{visibility:hidden}  /* Jordi 5:46 PM: hook + paper tag hidden from the start until the jacket lands (box pops off) */
.n-po.hti-po{visibility:hidden}
.hti-box{position:absolute;z-index:4;box-sizing:border-box;border:2px solid #fff;pointer-events:none;filter:drop-shadow(0 0 1px rgba(0,0,0,.6)) drop-shadow(0 1px 3px rgba(0,0,0,.22))}
.hti-box i{position:absolute;display:block;box-sizing:border-box;font-style:normal}
.hti-rot{left:50%;top:-34px;width:16px;height:16px;margin-left:-8px;border:2px solid #fff;border-radius:50%;background:transparent}
.hti-rot::after{content:'';position:absolute;left:50%;top:100%;width:2px;height:16px;margin-left:-1px;background:#fff}
.hti-box.hti-turn .hti-rot{background:#fff}
.hti-x{left:-11px;top:-11px;width:22px;height:22px;border:2px solid #fff;border-radius:50%;background:#2b2b2b;color:#fff;font:400 15px/17px var(--mono,monospace);text-align:center}
.jh-j.hti-sel,.wr-j.hti-sel{z-index:40!important;pointer-events:none}  /* beat 2: the West Coast Express jacket while its box is on */
/* ===== end HERO TOOL INTRO ===== */

/* ===== RACE CAR JACKET RAISE (default hero, Jordi Oct 19 5:47 PM — awaiting her OK on the before/after) =====
   racing.webp has ~5% empty space above its collar (only its own baked-in hanger neck sits there), so it hung lower than the other
   jackets and the silver hook floated above it. Lift just that cut-out so its hanger neck meets the hook like the others.
   Hook, bar, tag and the other jackets don't move. Uses the separate `translate` property so the hover transform still works. */
.jh-g[src$="/hero/racing.webp"],.wr-g[src$="/hero/racing.webp"]{translate:0 -5.5%}
/* ===== end RACE CAR JACKET RAISE ===== */
/* LOGO (Jordi Oct 19 5:52-5:53 PM): "Dirty Denim" in Rock Salt (the Baby Mascots Polaroid title font, like "Rakell 67 Baby Penguin"); "by Jordi" unchanged font (Fraunces italic), smaller, under it. Logo block far left, stacked, LEFT-aligned edges. Nav links stay centred. */
body.navf-picked .hdr .logo .lg-1,.hdr .logo .lg-1{font:400 19px/1.15 'Rock Salt',cursive;font-style:normal;text-transform:none;letter-spacing:0;gap:.35em}
body.navf-picked .hdr .logo .lg-m,.hdr .logo .lg-m{align-items:flex-start}
.hdr .logo i,body.navf-picked .hdr .logo i{text-align:left;margin-top:2px}
@media (min-width:901px){.hdr .logo .lg-m,body.navf-picked .hdr .logo .lg-m{align-items:flex-start}.hdr .logo i{text-align:left}}
@media (max-width:900px){body.navf-picked .hdr .logo .lg-1,.hdr .logo .lg-1{font-size:16px}}

/* ===== ROUND 1019-PM: steps ON the rink (/how-to), overlay from the page, rink-scene.html untouched ===== */
.ht-steps{position:absolute;left:0;top:0;width:1280px;height:760px;margin:0;padding:0;list-style:none;transform-origin:0 0;pointer-events:none;z-index:2;line-height:1.1}
.ht-steps li{position:absolute;width:236px;color:#1a1a2e}
.ht-steps .hts-t{display:block;font:400 22px/1 var(--led,'VT323'),monospace;letter-spacing:.02em;margin-bottom:6px;color:#1a1a2e}
.ht-steps .hts-b{display:block;font:400 17px/1.05 var(--led,'VT323'),monospace;color:#444}
.ht-steps.hts-small .hts-b{display:none}
.ht-steps.hts-small li{width:270px}
.ht-steps.hts-small .hts-t{font-size:36px;line-height:.95}
/* ===== end ROUND 1019-PM rink steps ===== */

/* ===== ROUND 1019-PM: second pen note on the enlarged/zoomed product view ("Ask for me to personalize this style for you."),
   coming from below-left, arrow up at Make it mine; the first "Need it personalized?" note is hidden there (her 1:00 PM: "scrap it") ===== */
.mm-row{position:relative}
.mm-pen2{display:none;position:absolute;left:-150px;top:calc(100% - 4px);width:150px;pointer-events:none;z-index:3}
.mm-pen2 img{display:block;width:100%;height:auto}
.pv:has(.pv-pair.has-fwd) .mm-pen2,.pv:has(.pv-close) .mm-pen2{display:block}
.pv:has(.pv-pair.has-fwd) .mm-pen,.pv:has(.pv-close) .mm-pen{display:none!important}
@media(max-width:760px){.mm-pen2,.pv:has(.pv-pair.has-fwd) .mm-pen2,.pv:has(.pv-close) .mm-pen2{display:none}}
/* ===== end ROUND 1019-PM pen note 2 ===== */
/* ===== ROUND 1019-PM: product page back chevron sat on the rack's left wire (desktop) and on the wire/tag (phone).
   Whole product block starts 22px lower so the chevron sits clear below the nav, above the rack. Chevron itself unchanged. ===== */
main .wrap.pv{padding-top:50px}
/* ===== end ROUND 1019-PM chevron ===== */

/* ===== ROUND 1019-PM: Kids Lab piece pop-up (existing .modal look) ===== */
.klpv{width:min(380px,90vw);text-align:center;padding:26px 24px 22px}
.klpv-img{height:220px;display:grid;place-items:center;margin:4px 0 12px}
.klpv-img{overflow:hidden}
.klpv .klpv-img img{width:auto!important;height:220px!important;max-height:220px!important;max-width:80%!important;object-fit:contain;display:block;margin:0 auto}
.klpv-t{font-family:var(--serif);font-size:22px;line-height:1.15;margin:0 0 8px}
.klpv-d{font-size:14px;color:var(--ink2,#555);margin:0 0 18px;line-height:1.5}
.klpv-go{display:inline-block}
/* ===== end ROUND 1019-PM Kids Lab pop-up ===== */
/* LOGO v3 (Jordi Oct 19 6:11 PM): "Dirty Denim" = site theme heading font, same as "Shop by Category" h2 (Fraunces 800 italic). "by Jordi" Fraunces italic smaller under it. Left-aligned, far left; nav stays centred. */
body.navf-picked .hdr .logo .lg-1,.hdr .logo .lg-1{font:italic 800 24px/1.05 Fraunces,Georgia,serif;text-transform:none;letter-spacing:-.01em}
@media (max-width:900px){body.navf-picked .hdr .logo .lg-1,.hdr .logo .lg-1{font-size:19px}}

/* ===== RACK NOTES PLACEMENT (Jordi Oct 19 6:16 PM; v4 6:39 PM) =====
   The two notes above the bar stay exactly where they sat (same anchors: playoff note upper-LEFT of the Ottawa hook, "something fun"
   upper-RIGHT of the blurred Team Canada hook). Only two things change: (1) handwriting 15% smaller (desktop clamp(17px,1.5vw,24px) →
   clamp(14.4px,1.275vw,20.4px); phone 3.4cqw → 2.89cqw); (2) each note's own arrow PNG is rescaled/turned slightly so its tail still
   leaves from the note's side and its tip ends just ABOVE the bar at its hook (never crossing the bar). Nothing else moves. ===== */
.jh-crop>.jh-po.wr-note.rn,.jh-crop>.jh-fun.wr-note.rn{font-size:clamp(14.4px,calc(var(--u) * .01275),20.4px)!important}
.wr .wr-note.rn.rn-l.n-po,.wr .wr-note.rn.rn-r.n-fun{font-size:2.89cqw!important}
/* v5 (Jordi 7:06 PM, replaces the v4 arrow geometry): SVG arrows (her fitted shape), shorter, tips stop ~25px (at 1440, scales with the hero)
   above the hook top and just point at it, never touching hook or bar. Playoff note unchanged. Fun note moved right (translate) so the arrow
   tail, which stays put, has ~16-24px of clear wall before "soon". Phone: same idea, ~18px above the bar. */
.jh-crop>.jh-po.wr-note.rn .rn-arr{left:calc(50% + var(--u) * .0457)!important;right:auto!important;top:calc(var(--u) * .0352)!important;width:calc(var(--u) * .0511)!important;transform-origin:8.96% 5.78%!important;transform:rotate(-26.4deg)!important}
.jh-crop>.jh-fun.wr-note.rn{translate:calc(5.95em - var(--u) * .0563) 0}  /* em part tracks the text (its font clamps); the arrow's left subtracts the same shift, so the tail + tip stay put and only the text moves away: ~16-24px clear before "soon" at 1024-1920 */
.jh-crop>.jh-fun.wr-note.rn .rn-arr{left:calc(50% - 5.95em - var(--u) * .0118)!important;right:auto!important;top:calc(var(--u) * .0281)!important;width:calc(var(--u) * .0469)!important;transform-origin:91.2% 4.7%!important;transform:rotate(28.9deg)!important}
.wr .wr-note.rn.rn-l.n-po .rn-arr{left:calc(50% + 10.85cqw)!important;right:auto!important;top:5.57cqw!important;width:11.82cqw!important;transform-origin:8.96% 5.78%!important;transform:rotate(17deg)!important}
.wr .wr-note.rn.rn-r.n-fun{translate:.5cqw 0}
.wr .wr-note.rn.rn-r.n-fun .rn-arr{left:calc(50% - 19.27cqw)!important;right:auto!important;top:8.51cqw!important;width:11.16cqw!important;transform-origin:91.2% 4.7%!important;transform:rotate(8deg)!important}
/* ===== end RACK NOTES PLACEMENT ===== */
/* ===== SVG NOTE ARROWS (Jordi Oct 19 6:59 PM + 7:06 PM) — see app.js rnArrow(). Her PNG arrows are gone site-wide; these rules give the
   inline SVG her grey ink and thin round strokes, and mirror the few old rules that sized the PNG by element type (img). ===== */
svg.rna{overflow:visible;fill:none;stroke:#6a6a6a;stroke-width:1.4px;stroke-linecap:round;stroke-linejoin:round;height:auto}
svg.rna path{vector-effect:non-scaling-stroke}
@media (max-width:760px){svg.rna{stroke-width:1.75px}}
.wr svg.rna{stroke-width:1.75px}
.wr-note.rn>svg.rn-arr{display:block!important;margin:0!important;padding:0!important}
.klh-mine svg.rna{width:clamp(40px,4vw,64px);height:auto;margin:4px 0 0 -10px;transform:scaleX(1)}
@media (max-width:760px){.klh-mine svg.rna{width:36px}}
.b3.b3 .b3-hnote svg.rna{width:clamp(70px,6vw,96px);height:auto;margin-left:46px}
@media(max-width:860px){.b3.b3.b3-hero .b3-hnote svg.rna{width:34px;margin:0 30px 0 0}}
/* ===== end SVG NOTE ARROWS ===== */

/* ===== Oct 19 (6:40 PM) TASK shop-1019a, /shop: Shop by Category tiles bigger, exactly 4 visible on desktop (was 5, 20cqw); same tile proportion (~0.96 w:h) ===== */
@media (min-width:761px){
  .cats-first .cat-grid.cat-track{transform:translateX(calc(var(--pos) * -25cqw))}
  .cats-first .cat-track>.cat{flex:0 0 25cqw}
  .cats-first.cats-compact .cat-loop.cat-big .cat-track>.cat{min-height:clamp(270px,26vw,375px)}
}
/* ===== Oct 19 (6:40 PM) TASK shop-1019b, /shop: 'Want something customized?' banner shorter (same wording, same 4 cards) ===== */
@media (min-width:761px){
  .tw.tw-shop{padding:calc(var(--u) * 12) 0 calc(var(--u) * 6)}
  .tw-shop .tw-top{height:calc(var(--u) * 58)}
  .tw-shop .tw-big{font-size:calc(var(--u) * 64);top:calc(var(--u) * -10)}
  .tw-shop .tw-rule{top:calc(var(--u) * 26)}
  .tw-shop .tw-top{padding-left:calc(var(--u) * 120)}
  .tw-shop .tw-head{padding-top:calc(var(--u) * 6)}
  .tw-shop .tw-h{font-size:calc(var(--u) * 22)}
  .tw-shop .tw-cards li{min-height:0;padding:calc(var(--u) * 10) calc(var(--u) * 20) calc(var(--u) * 8) calc(var(--u) * 24);border-top-width:calc(var(--u) * 2.6)}
  .tw-shop .tw-n{font-size:calc(var(--u) * 28);margin-bottom:calc(var(--u) * 5)}
  .tw-shop .tw-cards h3{font-size:calc(var(--u) * 14.5);margin-bottom:calc(var(--u) * 4)}
  .tw-shop .tw-cards p{font-size:max(11px,calc(var(--u) * 9.6));line-height:1.5}
}
@media (max-width:760px){
  .tw.tw-shop{padding:14px 0 8px}.tw-shop .tw-top{margin-bottom:8px}.tw-shop .tw-big{font-size:58px}.tw-shop .tw-h{font-size:22px}
  .tw-shop .tw-cards li{padding:10px 8px 10px 2px}.tw-shop .tw-cards li:nth-child(2n){padding-left:12px}
  .tw-shop .tw-n{font-size:26px;margin-bottom:6px}.tw-shop .tw-cards h3{font-size:15.5px;margin-bottom:4px}.tw-shop .tw-cards p{font-size:12.5px;line-height:1.45}
}
/* ===== Oct 19 (6:40 PM) TASK polaroid-1019: hanging collection cards = Jordi's ORIGINAL Claude card (.coll-clip / .coll-card-inner / .coll-card-img /
   .coll-card-body / .coll-card-num / .coll-card-name, source /workspace/dv/her-body2.txt lines 1112-1159), values verbatim.
   Our cover photo sits where her grey 'image coming soon' box (#EDE9E3, 3:4) sat. Name = one line, auto-shrinks (jpFitNames in app.js), so every card is the same size.
   Her card has no description line, so .pol-line is hidden here (kept in data). Off switch: SEED.jordiPolCard = false ===== */
.pols.jp-card .pol .clip{width:18px;height:24px;margin-left:-9px;border:2px solid #A8A4A0;border-bottom:none;border-radius:3px 3px 0 0;background:#D8D4D0;box-shadow:inset 0 1px 0 rgba(255,255,255,0.4)}
.pols.jp-card .pol .clip:after{content:'';position:absolute;left:50%;right:auto;top:2px;transform:translateX(-50%);width:6px;height:14px;border:1.5px solid #908C88;border-bottom:none;border-radius:2px 2px 0 0;background:#E8E4E0}
.pols.jp-card .pol .card{background:#fff;border:1px solid rgba(0,0,0,0.08);padding:10px 10px 20px;box-shadow:1px 3px 12px rgba(0,0,0,0.07)}
.pols.jp-card .pol .ph{width:100%;aspect-ratio:3/4;background:#EDE9E3;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:0}
.pols.jp-card .pol .ph img,.pols.jp-card .pol .ph.art img{width:100%;height:100%;object-fit:contain;padding:0;mix-blend-mode:multiply}  /* whole garment, no crop; its white photo background melts into her grey box */
.pols.jp-card .pol .ph>span{font:400 9px/1.8 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:0.15em;color:#D8D4CC;text-transform:uppercase;text-align:center}
.pols.jp-card .pol .num{margin:16px 6px 4px;font:400 9px/1.2 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:0.2em;color:#D8D4CC;text-transform:uppercase}
.pols.jp-card .pol h3{margin:0 6px;font-family:var(--serif);font-size:18px;font-style:italic;font-weight:500;color:#0F0E0C;line-height:22px;height:22px;hyphens:none;white-space:nowrap;overflow:hidden;letter-spacing:0}
.pols.jp-card .pol .pol-line{display:none}
.line.mini .pols.jp-card .pol .card{padding:6px 6px 10px}
.line.mini .pols.jp-card .pol .num{display:none}
.line.mini .pols.jp-card .pol h3{margin-top:8px;font-size:12px;line-height:15px;height:15px}
/* ===== ROUND 1019-PM: back chevron (just below the nav, left) never sits on page art: /collections clip rail + /how-to rink crowd start below it ===== */
body:has(.pgback) main > .rail:first-child{margin-top:40px}
body.ht-page main > .ht:first-child{margin-top:40px}
/* ===== end ROUND 1019-PM chevron clearances ===== */
/* polaroid-1019: a long name must never widen its card (flex min-content) — it shrinks instead */
.pols.jp-card .pol{min-width:0}
.pols.jp-card .pol h3{contain:inline-size}
/* LOGO v4 (Jordi Oct 19 6:49 PM): "by Jordi" in the nav font (Barlow Condensed 500 caps, letter-spaced like the nav links), smaller, stacked under "Dirty Denim" (Frances), left-aligned. */
.hdr .logo i,body.navf-picked .hdr .logo i{font:500 10.5px/1.2 'Barlow Condensed','Arial Narrow',sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:.2em;margin-top:3px;text-align:left}
@media (max-width:900px){.hdr .logo i,body.navf-picked .hdr .logo i{font-size:9.5px}}
/* ===== ROUND 1019-1853 (Jordi, Oct 19 6:53–7:04 PM) ===== (the 6:53 shop-banner padding + 6:58 two-tile width were superseded at 7:04 PM by the four-ways banner below) */
/* 2) /request: section heading between the 4-step banner and the board, same heading style as 'Shop by Category'; sits on the board's own background so it reads as the board's title */
.bh-sec{background:rgb(248,247,244);padding:clamp(28px,3.4vw,48px) 0 clamp(14px,1.6vw,22px)}
.bh-sec .bh-in{max-width:1440px;padding-left:40px;padding-right:40px}
.bh-sec h2.title.bh-h{max-width:none;margin:0;font-size:clamp(30px,3.6vw,48px)}
@media (max-width:760px){ .bh-sec .bh-in{padding-left:20px;padding-right:20px} .bh-sec{padding:26px 0 12px} }

/* ===== Oct 19 (6:53 PM) Jordi: crisp code-drawn arrows on the product-page pen notes (note 1 "Need it personalized?" + zoom-view note 2).
   Her PNG's painted arrow is clipped out (hole = the arrow's pixel box + 4px), the SVG redraws it on the same grid. Note text, size, spot unchanged. ===== */
.mm-pen:not(.mm-pen-j){position:relative}
@media(min-width:1001px){.mm-pen:not(.mm-pen-j){position:absolute}}
.mm-pen .pen-img-1{clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,76.9% 32.6%,100% 32.6%,100% 51.4%,76.9% 51.4%,76.9% 32.6%)}
.mm-pen2 .pen-img-2{clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,75.2% 0,100% 0,100% 28.7%,75.2% 28.7%,75.2% 0)}
.mm-pen .pen-arr,.mm-pen2 .pen-arr{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pen-arr path{fill:none;stroke:#6e6e6c;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* ===== end arrow-1019 ===== */

/* ===== Jordi (Oct 19, 6:54 PM): calculator where the arrow was + crisp vector arrow to the plus; deposit note bigger, black outline heart ===== */
.b3.b3 .b3-harrow-ink{overflow:visible;transform:none;color:#2b2420}
.b3.b3 .b3-harrow-ink path{stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
@media(min-width:861px){
  .b3.b3.b3-hero .qr:has(.b3-hcalc-mid){--cl:min(calc(50% + 270px),calc(100% - var(--cw) + 20px));--aw:clamp(150px,15vw,210px)}
  .b3.b3.b3-hero .b3-hcalc.b3-hcalc-mid{left:var(--cl);right:auto;top:calc(47% - var(--cw) * .63);bottom:auto}
  .b3.b3.b3-hero:not(.b3-rink) .b3-harrow.b3-harrow-ink{width:var(--aw);right:calc(100% - var(--cl) - 4px);left:auto;bottom:auto;top:calc(50% + 20px - var(--aw) * .4);transform:none}
}
@media(max-width:860px){
  /* phone: no free spot between the plus copy and the deposit note, so the calculator keeps its place; only the arrow is redrawn */
  .b3.b3.b3-hero .b3-harrow.b3-harrow-ink{width:calc(67% - 30px - var(--cw))!important;left:calc(33% + 34px);right:auto;bottom:auto;top:calc(64% - 22px - (67vw - 30px - var(--cw)) * .4)}
  .b3.b3 .b3-harrow-ink path{stroke-width:2.4}
}
.b3.b3 .b3-deppin .dn-heart{display:inline-block;width:1em;height:.92em;vertical-align:-.12em;overflow:visible}
.b3.b3 .b3-depnote .dn-heart{display:inline-block;width:1em;height:.92em;vertical-align:-.12em}
@media(min-width:861px){
  .b3.b3.b3-hero .b3-deppin.b3-deppin-hero{width:clamp(200px,17vw,250px);font-size:clamp(15px,1.2vw,17px);line-height:1.38;padding:18px 16px 15px}
  .b3.b3 .b3-deppin.b3-deppin-flow{font-size:16px;width:clamp(200px,20vw,250px)}
}
@media(max-width:860px){
  .b3.b3.b3-hero .b3-deppin.b3-deppin-h{width:168px;font-size:13.5px;line-height:1.32;padding:12px 10px 10px}
  .b3.b3 .b3-deppin.b3-deppin-flow{font-size:14px}
}
/* ===== SWEEP FIX 1019 (Oct 19 evening, jordi-mismatch-sweep-1019.md) ===== */
/* B1 (Jordi 6:56 + 6:58 PM): Shop by Category tiles big and tall, about 4.5 visible on desktop (a half tile peeks at the right edge so it reads as a carousel),
   garments 50% bigger inside each tile (whole garment, never cropped). Arrows keep stepping SEED.catStep tiles. Replaces the 6:40 PM 'exactly 4' rule above. */
@media (min-width:761px){
  .cats-first .cat-grid.cat-track{transform:translateX(calc(var(--pos) * -22.2222cqw))}
  .cats-first .cat-track>.cat{flex:0 0 22.2222cqw}
  .cats-first.cats-compact .cat-loop.cat-big .cat-track>.cat{min-height:clamp(450px,37vw,560px)}
  .cats-first .cat-loop.cat-big .cat-img{top:3.5%;width:94%;max-height:69%}
}
/* B5 (Jordi 6:05 PM + approval audit 7:08 PM): the back chevron is no longer fixed/sticky on top of the page. It scrolls away with the page,
   in its own clear row right under the nav, so it never lands on the tag rail, the rink crowd, the shop filter sidebar, 'BROWSE BY TYPE' or a category tile.
   The old clearances (rail / rink margin-top 40px) aren't needed any more: the row itself is the clearance. */
.pgback{position:relative;top:auto;height:46px;z-index:2}
.pgback .pgbk{top:6px}
body:has(.pgback) main > .rail:first-child{margin-top:8px}
body.ht-page main > .ht:first-child{margin-top:0}
@media (max-width:760px){.pgback{height:42px}.pgback .pgbk{top:4px}}
/* ===== end SWEEP FIX 1019 ===== */
/* ===== MARBLES ROLL 1019 (Jordi, Oct 19 7:00 PM): while the marbles roll around the hero they never catch clicks; the shadow sits on the
   un-rotated outer circle, so it stays under the marble the whole way (no scaling, no hop) ===== */
.mq.mq-rolling .mq-b{pointer-events:none}
.mq.mq-rolling .mq-b{box-shadow:0 4px 9px rgba(40,30,10,.2)}
/* 3) /shop four-ways banner: same size + padding as the /custom section (plain .tw); only its heading is one line, so the head sits a touch lower like the two-line one */
.tw.tw-4w .tw-cards li p{margin-top:0}
/* 4) /shop welcome intro: compact, no images; Fraunces 800 italic heading like the other section titles, Barlow line under it */
.shop-hi{padding:clamp(30px,3.6vw,52px) 0 0}
.shop-hi h1.title.shop-hi-h{font:italic 800 clamp(32px,3.8vw,52px)/1.02 var(--serif);letter-spacing:-.02em;max-width:none;margin:0 0 10px}
.shop-hi-p{font:400 clamp(15px,1.25vw,18px)/1.5 'Barlow',sans-serif;color:#55524c;margin:0;max-width:60ch}
@media (max-width:760px){.shop-hi{padding-top:34px}.shop-hi-p{font-size:15px}}
/* ===== HERO CTAS 1019 (Jordi, Oct 19 7:01 PM): "Make something mine" + "Build a new idea" exactly the same size (equal grid columns = the wider
   label's width; the row stretches both to the same height), label centred, no arrow glyph (removed in the markup). Wording unchanged. ===== */
.jh-crop>.jh-cta.ctas,.ctas.hero-ctas2{display:inline-grid;grid-template-columns:1fr 1fr;align-items:stretch;justify-content:start;width:max-content;max-width:100%}
.jh-crop>.jh-cta.ctas>.btn,.ctas.hero-ctas2>.btn{display:flex;align-items:center;justify-content:center;text-align:center;margin:0;min-width:0}

/* ===== NO-TEAM 1019: note + black button inside the 'haven't done one for your team' bubble, picks list under it ===== */
.emptyteam .nt-note{margin:26px auto 14px;font-size:15px;color:var(--ink2);max-width:46ch}
.emptyteam .nt-btn{display:flex;justify-content:center}
.emptyteam .nt-btn .btn{background:var(--ink);color:var(--paper)}
.nt-list{margin:0 0 60px}
/* ===== end NO-TEAM 1019 ===== */
@media (max-width:760px){.ctas.hero-ctas2>.btn,.ctas.hero-ctas2>.btn.ghost{padding-left:10px;padding-right:10px}}  /* phone: the equal pair stays inside the text column */
/* ===== end HERO CTAS 1019 ===== */
/* Shop gallery: single-photo Polaroid (Ottawa) same size as the double ones (Jordi 6:00 PM same-size rule, Oct 19) */
.pst.pol2:not(.has-b){padding-right:0}

/* ===== KIDS BOX MERGED 1019 (SEED.kidsLab.boxPanel = 'merged'): same mm-look window; tabs on the right, starburst sticker on the box ===== */
.kb-look .mm-look-box .mm-h{color:#24418a}
.kb-stage{position:relative}
.kb-burst{position:absolute;right:-4px;top:4%;z-index:4;transform:scale(.82);transform-origin:100% 0}
.kb-burst .mm-wrapb{display:inline-block;margin:0}
.kb-tabs{display:flex;gap:8px;align-items:center;margin:4px 40px 12px 0;flex-wrap:wrap}
.kb-tab{font:700 18px/1.2 var(--sans);color:var(--ink);background:none;border:0;padding:0;cursor:default}
.kb-tab:not(.on){font:600 13px/1 var(--sans);color:#8a857c;background:#eeebe5;border:1px solid #ddd8cf;border-radius:999px;padding:8px 13px;cursor:pointer}
.kb-tab:not(.on):hover{color:var(--ink);border-color:var(--ink)}
.kb-list{list-style:none;margin:0;padding:0}
.kb-it{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center;background:#fff;border-radius:10px;padding:10px;margin-bottom:10px;border:2px solid transparent;transition:border-color .2s}
.kb-it.on{border-color:#24418a}
.kb-th img{width:92px;height:92px;object-fit:contain;display:block}
.kb-t b{display:block;font:600 14px/1.3 var(--sans);margin-bottom:8px}
.kb-t .kb-sizes{margin-bottom:8px}
.kb-go{font:600 13px var(--sans)}
.kb-psz{margin:4px 0 16px}
@media (max-width:760px){.kb-it{grid-template-columns:72px 1fr}.kb-th img{width:72px;height:72px}
  .mm-look-box .kb-stage{grid-column:2;grid-row:1/3}.mm-look-box .kb-stage .bx{grid-column:auto;grid-row:auto}
  .kb-burst{transform:scale(.42);right:-10px;top:-6px}.kb-tab{font-size:16px}}
/* the Kids Lab copy column is its own stacking context (z 2), so the later 'Inside your locker' strip's box stickers painted over the
   pop-up (also true for the old Mini & Me pop-up): lift that column while the pop-up is open */
.klh-copy:has(#mmlook){z-index:90}
.kb-sizes .mm-sz{height:25px;min-width:30px;padding:0 7px;font-size:11px}
@media (max-width:760px){.kb-burst{right:auto;bottom:auto;left:-18px;top:-14px;transform:scale(.46);transform-origin:0 0}.kb-tabs{margin-right:0}}
.kb-piece .btn.ghost[data-kbpadd]{border:1px solid #1d1c1a;padding:12px 18px}
/* ===== end KIDS BOX MERGED 1019 ===== */

/* Oct 19 7:19 PM: Kids Lab note arrow flipped to point left at the box (code-drawn, note ink) */
svg.klh-arrow-box{overflow:visible;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;color:inherit}
svg.klh-arrow-box path{vector-effect:non-scaling-stroke}
/* Oct 19 7:24 PM: random kids box loop (JS-driven transitions; quick opacity so nothing lingers half-visible) */
.klh-loop .klh-stk .stk2-b{animation:none;transform:scale(0);opacity:0;visibility:hidden;transition:transform .45s cubic-bezier(.4,0,.6,1),opacity .2s linear .2s,visibility 0s linear .45s}
.klh-loop .klh-stk.in .stk2-b{transform:scale(1);opacity:1;visibility:visible;transition:transform .5s cubic-bezier(.3,1.45,.55,1),opacity .18s linear,visibility 0s}
.klh-loop .klh-empty{animation:none;transform:scale(.6) rotate(-4deg);opacity:0;visibility:hidden;transition:transform .4s,opacity .25s,visibility 0s linear .4s}
.klh-loop .klh-empty.show{transform:scale(1) rotate(-4deg);opacity:1;visibility:visible;transition:transform .45s cubic-bezier(.3,1.4,.55,1),opacity .2s,visibility 0s}
@media (prefers-reduced-motion:reduce){.klh-loop .klh-stk .stk2-b,.klh-loop .klh-empty{transition:none!important}}

/* ===== SHOP RACK PREVIEW 1019 (Jordi Oct 19 7:20–7:23 PM) — only renders on /shop?shoprack=1 (SEED.shopRack). Default /shop untouched.
   Kids-Lab-style hero on soft baby blue #dde9f5 (the site's light-blue accent); no rug, no box: ONE long rack is the visual.
   The bar = Jordi's approved rod-wide.webp, LENGTHENED only: border-image 3-slice keeps her end caps + ceiling cords at true scale
   (--rs = her pixels → ours), the plain bar middle stretches. Hooks/hangers = the homepage onHanger() (.oh / .oh-hook / .oh-g). ===== */
body:has(.sr-hero) .hdr{background:rgba(221,233,245,.62);border-bottom-color:transparent}
.sr-hero{--srbg:#dde9f5;position:relative;margin-top:-63px;min-height:max(660px,100vh);display:grid;grid-template-columns:minmax(0,60%) minmax(0,40%);align-items:center;background:var(--srbg);overflow:hidden}
.sr-stage{position:relative;padding:96px 0 40px 2.4vw;min-width:0}
.sr-scroll{position:relative}
.sr-rack{--rs:.32;position:relative;width:100%;padding-bottom:300px}
.sr-rod{display:block;height:calc(406px * var(--rs));border-style:solid;border-width:0 calc(160px * var(--rs));border-image:url(/assets/rack/rod-wide.webp) 0 160 0 160 fill stretch;pointer-events:none}
.sr-row{position:absolute;left:0;right:0;top:calc(378px * var(--rs) - 6px);display:flex;justify-content:center;padding:0 5%}
.sr-j{position:relative;flex:0 0 calc(90% / var(--n));display:block;text-decoration:none;color:var(--ink);transform-origin:50% 0;animation:sway 7s ease-in-out infinite;animation-delay:calc(var(--k) * -1.7s);z-index:calc(2 + var(--k))}
.sr-j:nth-child(even){z-index:calc(10 + var(--k))}
.sr-j .oh{width:150%;margin-left:-25%}
.sr-j .oh-hook{width:15%;max-width:32px}
.sr-j .oh-g{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sr-j:hover{z-index:30}
.sr-j:hover .oh-g{transform:translateY(-4px) scale(1.02)}
.sr-tag{position:absolute;left:4%;top:86%;z-index:3;background:#fffdf7;padding:4px 8px 5px 16px;font:400 clamp(11px,.95vw,14px)/1.1 var(--hand);color:#222;max-width:120px;box-shadow:0 2px 6px rgba(0,0,0,.14);transform:rotate(-5deg);white-space:normal}
.sr-tag:before{content:"";position:absolute;left:6px;top:50%;width:5px;height:5px;transform:translateY(-50%);border-radius:50%;border:1px solid #9b968e}
.sr-j:nth-child(even) .sr-tag{transform:rotate(4deg);top:90%}
.sr-hero .klh-copy.sr-copy{margin:0;width:auto;max-width:560px;padding:110px var(--pad) 60px 2vw}
.sr-copy .kl-h{margin:8px 0 14px}
.sr-copy .kl-q{margin-top:22px}
.sr-copy .kl-sq:hover{background:rgba(255,255,255,.45)}
.sr-copy .kl-sq em{color:#5d6f86}
.sr-copy .sr-all{display:inline-block;margin-top:16px}
@media (max-width:1000px){
  .sr-hero{display:block;min-height:0;margin-top:-57px}
  .sr-stage{padding:74px 0 8px}
  .sr-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 14px}
  .sr-scroll::-webkit-scrollbar{display:none}
  .sr-rack{--rs:.28;width:900px;padding-bottom:280px}
  .sr-tag{font-size:12px}
  .sr-hero .klh-copy.sr-copy{padding:6px 18px 40px;max-width:none}
  .sr-hero .klh-copy .kl-sqs.sr-sqs{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
  .sr-hero .klh-copy .sr-sqs .kl-sq{aspect-ratio:2.1/1}
}
@media (prefers-reduced-motion:reduce){.sr-j{animation:none}}
/* ===== end SHOP RACK PREVIEW 1019 ===== */
/* Oct 19 7:25 PM: "Made for you · The Dirty Denim Shop" printed on the inside of the open box lid (code text, no image) */
.kl-lid{position:absolute;z-index:1;pointer-events:none;container-type:inline-size;transform:translate(-50%,-50%) rotate(var(--lr)) skewX(var(--lk));text-align:center;color:#6b4a2b;opacity:.62;mix-blend-mode:multiply}
.kl-lid-in{display:flex;flex-direction:column;align-items:center;gap:1.5cqw}
.kl-lid small{font:600 5.2cqw/1 'Barlow Condensed',var(--mono);letter-spacing:.24em;text-transform:uppercase}
.kl-lid b{font:italic 800 9.6cqw/1 Fraunces,var(--serif);white-space:nowrap}
.kl-lid-hero{left:22.4%;top:33%;width:15.5%;--lr:-4deg;--lk:5deg}
.kl-lid-box{left:43.6%;top:29%;width:25%;--lr:-3.2deg;--lk:7deg}

/* ===== Jordi Oct 19 7:20 PM — Polaroid tap-to-flip + 'View details' + Marker Felt names (SEED.polTapFlip=false / SEED.polFont='rocksalt' = before) ===== */
.pst.pol2.tapflip .p2-stack{position:relative;display:block;color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pst.pol2.tapflip .p2-stack:focus{outline:none}
.pst.pol2.tapflip .p2-stack:focus-visible{outline:2px solid #8db9f4;outline-offset:4px}
.pst.pol2.tapflip .p2{transition:transform .5s cubic-bezier(.3,.8,.3,1),z-index 0s linear .2s,box-shadow .5s}
.pst.pol2.tapflip.flip .p2-b{animation:p2in .5s cubic-bezier(.3,.8,.3,1)}
.pst.pol2.tapflip.flipped-back .p2-f{animation:p2in .5s cubic-bezier(.3,.8,.3,1)}
@keyframes p2in{40%{translate:0 -4%}}
@media (prefers-reduced-motion:reduce){.pst.pol2.tapflip .p2{transition:none;animation:none!important}}
.pst.pol2.tapflip .p2-vd{display:table;margin:25px auto 0;text-decoration:none}
@media (max-width:760px){.pst.pol2.tapflip .p2-vd{margin-top:21px}}
.pst.pol2.tapflip .p2-vd:hover{color:#4a4844;text-decoration:underline}
@media (hover:none){.pst.pol2.tapflip .p2-vd:hover{color:#8a877f;text-decoration:none}}
.pst.pol2.pf-markerfelt .p2-name{font-family:'Marker Felt','MarkerFelt-Thin','Gochi Hand',cursive!important;font-weight:400!important;font-size:9cqw;line-height:1.2;padding:.1em 0 .15em;color:#2a2926}
.pst.pol2.pf-markerfelt .p2-b .p2-name,.pst.pol2.pf-markerfelt.flip .p2-f .p2-name{color:#7d7a72}
.pst.pol2.pf-markerfelt.flip .p2-b .p2-name{color:#2a2926}
/* ===== FOURWAYS TRIM 1019 (Jordi, Oct 19 7:42 PM: "about an inch on my screen. It's unnecessary." = empty space under the /shop four-ways step cards).
   /shop .tw-4w only: cards end soon after their text (no min-height), smaller gap between the heading row and the cards, shorter section bottom.
   Big 4, heading, colours (TW_COL top rules + numerals) and card text unchanged. /custom + How to banners untouched. ===== */
.tw.tw-4w{padding-bottom:calc(var(--u) * 26)}
.tw-4w .tw-top{height:calc(var(--u) * 132)}
.tw-4w .tw-cards li{min-height:0;padding-top:calc(var(--u) * 26);padding-bottom:calc(var(--u) * 24)}
.tw-4w .tw-n{margin-bottom:calc(var(--u) * 18)}
@media (max-width:760px){
  .tw.tw-4w{padding-bottom:22px}.tw-4w .tw-top{height:auto;margin-bottom:18px}
  .tw-4w .tw-cards li{padding:16px 4px 16px}.tw-4w .tw-n{margin-bottom:10px}
}
/* Jordi 7:44 PM: grey heading sits lower, centred on the big 4 (not floating at its top); welcome title clearly bigger than the grey heading */
.tw-4w .tw-head{padding-top:calc(var(--u) * 26)}
.shop-hi h1.title.shop-hi-h{font-size:clamp(38px,5vw,72px)}
@media (max-width:760px){.tw-4w .tw-top{align-items:center}.tw-4w .tw-head{padding-top:0}.shop-hi h1.title.shop-hi-h{font-size:36px}}
/* ===== end FOURWAYS TRIM 1019 ===== */

/* ===== BOARD WORDING 1019 (Jordi 7:43 PM): grey body line under 'Welcome to your custom order board' — same feel as the /shop welcome body (.shop-hi-p), left-aligned with the heading, small gap ===== */
.bh-sec .bh-sub{font:400 clamp(15px,1.25vw,18px)/1.5 'Barlow',sans-serif;color:#55524c;margin:10px 0 0;max-width:60ch}
@media (max-width:760px){.bh-sec .bh-sub{font-size:15px;margin-top:8px}}
/* ===== end BOARD WORDING 1019 ===== */

/* Oct 19 7:48 PM (Jordi): empty kids box note sits OUTSIDE the lid, on the peach to the right of the box; its arrow starts
   under the note and points down-left into the box opening. Never over the lid or its print. */
.klh-loop .klh-mine.klh-empty{left:35.6%;top:33%}
.klh-loop .klh-empty svg.rna{width:7.5vw;margin:2px 0 0 0}
.klh-loop .klh-mine.klh-empty span{max-width:10em}
@media (max-width:760px){
  .klh-loop .klh-mine.klh-empty{left:37.6%;top:34%}
  .klh-loop .klh-mine.klh-empty span{max-width:40vw;font-size:15px}
  .klh-loop .klh-empty svg.rna{width:40px;margin:2px 0 0 -6px}
}

/* ===== SHOP PICKS PHOTO 1019 (mock-up, /shop?picksbg=1): her real studio photo, defocused, full bleed behind Coach's picks ===== */
.cats-grid.picks-photo{position:relative;isolation:isolate;padding-top:34px;padding-bottom:44px}
.cats-grid.picks-photo:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(248,247,244,.55) 0,rgba(248,247,244,.18) 26%,rgba(248,247,244,.12) 100%),
    url(/assets/studio/jordi-rack-blur-2400.webp?v=halfblur1019) 50% 35%/cover no-repeat}
@media (max-width:820px){
  .cats-grid.picks-photo:before{background:linear-gradient(180deg,rgba(248,247,244,.5) 0,rgba(248,247,244,.15) 140px,rgba(248,247,244,.15) 100%),
    url(/assets/studio/jordi-rack-blur-phone.webp?v=halfblur1019) 62% 12%/cover no-repeat}
}
/* readability only (same words, same colour): a soft paper-coloured glow behind the small grey text that sits on the photo */
.cats-grid.picks-photo .ca-sub,.cats-grid.picks-photo .ca-top .mono,.cats-grid.picks-photo .ca-coach{text-shadow:0 0 6px rgba(248,247,244,.95),0 0 14px rgba(248,247,244,.9),0 0 22px rgba(248,247,244,.7)}
.cats-grid.picks-photo .p2-vd{background:rgba(248,247,244,.82);padding:1px 10px;border-radius:999px}
/* ===== end SHOP PICKS PHOTO 1019 ===== */
/* Oct 19 8:00 PM (Jordi): lid print ~35% smaller and stamped INTO the cardboard: lower contrast, leans back with the lid
   (perspective), multiply blend, soft ink edge + uneven ink coverage (code noise mask, no image file) */
.kl-lid{color:#7a5634;opacity:.5;mix-blend-mode:multiply;transform:translate(-50%,-50%) perspective(260px) rotateX(16deg) rotate(var(--lr)) skewX(var(--lk));filter:blur(.25px);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.6 1.35'/></filter><rect width='120' height='60' filter='url(%23n)'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.6 1.35'/></filter><rect width='120' height='60' filter='url(%23n)'/></svg>");
  -webkit-mask-size:60px 30px;mask-size:60px 30px}
.kl-lid b,.kl-lid small{text-shadow:0 0 .6px currentColor}
.kl-lid{opacity:.56}
.kl-lid b{font-size:8.4cqw}.kl-lid small{font-size:5cqw}
.kl-lid-hero{width:11.2%}
.kl-lid-box{width:17.8%}
/* GALLERY TILE HEIGHT 1019 (Jordi 8:04 PM: info tiles "should still be the same height as the cards that are next to them, not short… make it cohesive").
   Signature Portraits gallery rows: every cell stretches to the full row height, so the blue note tile, the text cards and the piece cards share one height.
   The approved scattered offsets stay exactly where they were, moved from margin-top to translateY (margins would make stretched cells uneven);
   the extra row-gap / bottom padding gives back the room the margins used to take, so the rows below don't move. Proc tiles kept their 0 offset. */
.ps-row{align-items:stretch;row-gap:40px;padding-bottom:44px}
.ps-row>*:nth-child(n){margin-top:0}
.ps-row>*:nth-child(4n+2):not(.proc){transform:translateY(14px)}
.ps-row>*:nth-child(4n+3):not(.proc){transform:translateY(-4px)}
.ps-row>*:nth-child(4n+4):not(.proc){transform:translateY(6px)}
.ps-row>.ps-note{min-height:0}
@media (max-width:900px){.ps-row{row-gap:36px;padding-bottom:36px}}

/* ===== FOURWAYS SCALE 1019 (Jordi 8:18 PM mock: big 4 on the left; right of it, top-aligned with the 4's top, "Welcome to my little design studio";
   directly under it the grey "Ways to create / your custom piece", smaller; both inside the 4's height. Coloured rules + 01–04 cards stay full width,
   compact, right under the 4 block; then the tags row). /shop .tw-4w.tw-hi4 only (SEED.shopWelcomeInFour). /custom + How to untouched. ===== */
.tw-hi4.tw{padding-top:calc(var(--u) * 46)}
.tw-hi4 .tw-top{height:calc(var(--u) * 134);padding-left:calc(var(--u) * 123)}
.tw-hi4 .tw-head{padding-top:0}
.tw-hi4 .tw-hi-h{font:italic 800 calc(var(--u) * 42.5)/1.02 var(--serif);letter-spacing:-.02em;color:#141414;max-width:none;margin:calc(var(--u) * -2) 0 calc(var(--u) * 12);text-transform:none}
.tw-hi4 .tw-h{font-size:calc(var(--u) * 23.6);line-height:1.08}
.tw-hi4 .tw-hi-p{font-size:max(13px,calc(var(--u) * 11));margin:calc(var(--u) * 8) 0 0}
@media (max-width:760px){
  .tw-hi4.tw{padding-top:30px}
  .tw-hi4 .tw-top{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center;padding-left:0;height:auto;margin-bottom:18px}
  .tw-hi4 .tw-head{display:contents}
  .tw-hi4 .tw-hi-h{grid-column:1/-1;grid-row:1;font-size:34px;line-height:1.05;margin:0 0 14px}
  .tw-hi4 .tw-big{grid-column:1;grid-row:2}
  .tw-hi4 .tw-h{grid-column:2;grid-row:2;font-size:24px}
  .tw-hi4 .tw-hi-p{grid-column:1/-1;grid-row:3;font-size:14px}
}
/* ===== end FOURWAYS SCALE 1019 ===== */

/* ===== GALLERY ROW ALIGN 1019 (Jordi 8:28 PM: "The blue should be the same height as the white Rakell image… They're not lined up. fix it.")
   Signature Portraits rows: drop the scattered translateY so every tile and card in a row shares the exact same top and bottom edge.
   Delete this block to bring the scatter back. ===== */
.ps-row>*:nth-child(n):not(.proc){transform:none}
.ps-row{row-gap:28px;padding-bottom:28px}
/* ===== end GALLERY ROW ALIGN 1019 ===== */
/* ===== KL ONE ARROW 1019 (Jordi Oct 19 8:27 PM): only one arrow at a time. Blue "My favorite orders to pack" note + arrow fade out (.2s)
   before the empty-box note fades in (held .25s), and fade back in only after the empty note has gone. SEED.kidsLab.oneArrow = false turns it off ===== */
html.kl-onearrow .kl-hero .klh-copy .kl-note{transition:opacity .25s ease .35s,visibility 0s linear 0s}
html.kl-onearrow .kl-hero:has(.klh-empty.show) .klh-copy .kl-note{opacity:0;visibility:hidden;transition:opacity .2s ease 0s,visibility 0s linear .2s}
html.kl-onearrow .klh-loop .klh-empty.show{transition-delay:.25s,.25s,.25s}
@media (prefers-reduced-motion:reduce){html.kl-onearrow .kl-hero .klh-copy .kl-note{transition:none!important}}
/* ===== end KL ONE ARROW 1019 ===== */

/* ===== SIGNIN NO CURRENCY 1019: sign-in card = bear + hi + sorry line (no currency); CURRENCY AFTER SIGNIN card on /file ===== */
.fileauth .signin-hi{max-width:420px}
.signin-hi .paypop-hirow{margin:0 0 8px}
.signin-sorry,.fileauth .signin-hi .signin-sorry{font:400 14px/1.45 var(--sans);color:#5c4a3e;margin:0;max-width:none}
.cur-after{position:relative;max-width:460px;margin:0 0 18px}
.cur-after .cur-ask{margin:0}
.cur-after .paypop-x{position:absolute;top:6px;right:8px;z-index:1}

/* ===== STYLE BLEED 1019 (Jordi Oct 19 8:39 PM): full-bleed title band per style (SEED.styleBleed), Baby Mascots player cards → Bruins-style Polaroids
   (SEED.styleCardMatch), Signature Portraits Polaroid frame preview (SEED.styleCardMatchPortraits → html.sb-psmatch). Colours = her note-card palette. ===== */
.sb-band{--sb-bg:var(--denim-soft);--sb-ink:#141414;--sb-no:#4f6f9f;position:relative;width:100vw;margin-left:calc(50% - 50vw);background:var(--sb-bg);color:var(--sb-ink);
  padding:clamp(84px,9vw,140px) 0 clamp(76px,8vw,124px);margin-top:clamp(18px,2.4vw,34px);box-sizing:border-box;overflow:hidden}
.sb-band.sb-yellow{--sb-bg:var(--butter);--sb-no:#8a7a1f}
.sb-band.sb-ink{--sb-bg:var(--ink);--sb-ink:var(--paper);--sb-no:#8db9f4}
.sb-in{max-width:1440px;margin:0 auto;padding:0 var(--pad);box-sizing:border-box}
.sb-no{font:600 clamp(56px,6vw,88px)/.9 var(--mono);letter-spacing:-.06em;color:var(--sb-no);margin:0 0 clamp(18px,2vw,28px)}
.sb-k{font-size:12px;letter-spacing:.22em;text-transform:uppercase;opacity:.62;margin:0 0 10px}
.sb-t{font:italic 800 clamp(64px,10.4vw,164px)/.92 'Fraunces',Georgia,serif;letter-spacing:-.035em;margin:0;text-transform:none;max-width:12ch}
.sb-line{font:400 clamp(17px,1.45vw,21px)/1.5 var(--sans);max-width:36em;margin:clamp(26px,2.6vw,38px) 0 0;opacity:.82}
.sb-hasband .bmg-no,.sb-hasband .bmg-k,.sb-hasband .bmg-t,.sb-hasband .bmg-d,
.sb-hasband .coll-side>.no,.sb-hasband .coll-title>div:last-child:not(.coll-pol),.sb-hasband .coll-side>p:not(.collline):not(.collnote){display:none}
.sb-hasband.coll,.sb-hasband.bmg{padding-top:clamp(34px,4vw,56px)}
@media (max-width:760px){
  .sb-band{padding:64px 0 56px;margin-top:12px}
  .sb-no{font-size:52px;margin-bottom:14px}
  .sb-t{font-size:clamp(50px,15vw,64px);line-height:.95}
  .sb-line{font-size:16px;margin-top:20px}
  .sb-hasband.coll,.sb-hasband.bmg{padding-top:24px}
}
html.sb-cardmatch .bmg-key li:has(.k-m){display:none}  /* the "Mascot card" key goes with the hidden cards */
/* mascot Polaroids: buttons instead of links, look identical to the Bruins card */
.sb-mpol button.p2-stack{appearance:none;background:none;border:0;padding:0;margin:0;width:100%;font:inherit;text-align:inherit;cursor:pointer}
.sb-mpol button.p2-vd{appearance:none;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
/* Signature Portraits preview: same Polaroid frame + Marker label as the Bruins card (tile box size unchanged, rows stay aligned) */
html.sb-psmatch .ps-tile:not(.ps-note):not(.ps-card):not(.ps-vid){background:#faf9f7;padding:4.6% 4.8% 0;box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 18px -10px rgba(0,0,0,.18)}
html.sb-psmatch .ps-tile:not(.ps-note):not(.ps-card):not(.ps-vid) .ps-img{background:#fff;border:7px solid #f2f0ec;box-shadow:0 0 0 1px #e2e1de;box-sizing:border-box}
html.sb-psmatch .ps-tile:not(.ps-note):not(.ps-card):not(.ps-vid) .ps-cap{text-align:center;padding:10px 6px 12px}
html.sb-psmatch .ps-tile:not(.ps-note):not(.ps-card):not(.ps-vid) .ps-cap b{font:400 15px/1.2 'Marker Felt','MarkerFelt-Thin','Gochi Hand',cursive;letter-spacing:0;text-transform:none;color:#2a2926}
html.sb-psmatch .ps-tile:not(.ps-note):not(.ps-card):not(.ps-vid) .ps-cap small{text-align:center}
/* v2 (Jordi 9:05 PM): white number on the title's line (baseline), her title, blurb under, 1–2 real pieces as die-cut stickers on the right */
.sb-band.sb-v2{padding:clamp(64px,6.4vw,104px) 0 clamp(60px,6vw,96px)}
.sb-v2 .sb-in{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;column-gap:clamp(24px,4vw,64px)}
.sb-v2.sb-haspc .sb-in{grid-template-columns:minmax(0,1fr) minmax(0,38%)}
.sb-v2 .sb-t{display:flex;align-items:baseline;gap:.22em;max-width:none;font-size:clamp(56px,7.2vw,116px);line-height:.95}
.sb-v2.sb-long .sb-t{font-size:clamp(44px,4.9vw,80px);line-height:1}
.sb-v2 .sb-no{flex:none;color:#fff;font:600 .92em/1 var(--mono);letter-spacing:-.06em;margin:0}
.sb-v2 .sb-tt{min-width:0}
.sb-v2 .sb-k{margin:0 0 14px}
.sb-v2 .sb-line{margin-top:clamp(20px,2.2vw,32px)}
.sb-pcs{position:relative;height:clamp(250px,25vw,380px)}
.sb-pc{position:absolute;display:block;width:58%;height:88%;transition:transform .25s ease}
.sb-pc img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 8px 12px rgba(30,30,40,.22))}
.sb-pc1{left:0;top:0;transform:rotate(-6deg);z-index:1}
.sb-pc2{right:0;bottom:0;transform:rotate(5deg);z-index:2}
a.sb-pc1:hover{transform:rotate(-6deg) translateY(-4px)}
a.sb-pc2:hover{transform:rotate(5deg) translateY(-4px)}
@media (max-width:760px){
  .sb-band.sb-v2{padding:52px 0 44px}
  .sb-v2.sb-haspc .sb-in{grid-template-columns:1fr}
  .sb-v2 .sb-t{font-size:clamp(46px,13vw,58px)}
  .sb-v2.sb-long .sb-t{font-size:clamp(34px,9.6vw,40px);line-height:1.04}
  .sb-pcs{height:210px;margin-top:28px}
  .sb-pc{width:50%;height:92%}
  .sb-pc1{left:2%}.sb-pc2{right:2%}
}
@media (prefers-reduced-motion:reduce){.sb-pc{transition:none}}
/* Jordi t928u (Oct 20): Baby Mascots band on her own cream (SEED.styleBleedColor['baby-mascots'] = var(--paper2)), faint bottom hairline (no top line: it doubled the nav border) so it reads as its own
   section on the page; the white '01/' (approved on blue) turns ink so it stays readable on cream. Wording/layout/sizes/stickers unchanged. */
.sb-band.sb-custom[data-sbband="baby-mascots"]{--sb-ink:var(--ink);border-bottom:1px solid var(--line)}
.sb-v2.sb-custom[data-sbband="baby-mascots"] .sb-no{color:var(--ink)}
/* ===== end STYLE BLEED 1019 ===== */
/* ===== MINI ME SQUARES 1019 (SEED.minimeSquares / SEED.lockerForYouRack) =====
   Tab 2 = compact quick view of the /locker/all cards (.lk-col look) + square mini tiles (the Oct 18 .mm-list / .mm-it square look) */
.mq-scroll{display:flex;flex-direction:column;gap:12px}
.mq-note{margin:0;font:500 21px/1.15 var(--hand);color:#24418a}
.mq-cols{display:grid;gap:10px}
.mq-cols.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.mq-col.lk-col{padding:12px 14px;border-radius:10px}
.mq-col .lk-colh{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px}
.mq-col .lk-h{font-size:20px;margin:2px 0 0}
.mq-its{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mq-its li{width:64px}
.mq-its a{display:block;text-decoration:none;color:var(--ink)}
.mq-its span{display:block;width:64px;height:64px;background:#f3efe7;border-radius:8px;overflow:hidden}
.mq-its img{width:100%;height:100%;object-fit:contain;display:block}
.mq-its b{display:block;font:600 10.5px/1.2 var(--sans);margin-top:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mq-sh{margin:6px 0 0;font:700 15px/1.2 var(--sans)}
.mm-look .mm-list.mq-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.mm-look .mm-it.mq-sq{display:flex;flex-direction:column;gap:6px;background:none;padding:0;border-radius:0;font-size:12.5px}
.mq-sq a{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink)}
.mq-sq img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#f3efe7;border-radius:8px;display:block}
.mq-sq b{font:600 12.5px/1.25 var(--sans)}
.mq-sq .btn{margin-top:auto;padding:8px 10px;font-size:10px;justify-content:center}
@media (max-width:760px){.mq-cols.two{grid-template-columns:minmax(0,1fr)}.mm-look .mm-list.mq-list{grid-template-columns:repeat(2,minmax(0,1fr))}.mq-note{font-size:19px}}
/* MINI ME ROW 1019 (10:26 PM): one white rectangle per locker item (the .kb-it / .mm-look .mm-it white rectangle: #fff, 10px radius, 10px padding,
   92px thumb + 600 14px title), stacked top to bottom at the full width of the right side (scrolls inside the panel);
   the 3 quick adds = a strip floating just under the pop-up card, as wide as the card. Card + strip are centred together. */
.mm-look-r:has(.mqr){min-width:0}.mq-scroll.mqr{min-width:0}.mq-scroll.mqr>*{flex-shrink:0;min-width:0}
.mqr-stack{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mqr-it{background:#fff;border-radius:10px;padding:10px}
.mqr-it a{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center;text-decoration:none;color:var(--ink)}
.mqr-th{display:block;width:92px;height:92px}
.mqr-th img{width:92px;height:92px;object-fit:contain;display:block}
.mqr-it b{font:600 14px/1.3 var(--sans)}
.mqr-has-strip,.mqr-strip{--S:168px;--G:12px;--H:min(640px,calc(100dvh - var(--S) - var(--G) - 32px));--T:calc((100dvh - var(--H) - var(--G) - var(--S)) / 2)}
.mm-look.mqr-has-strip{height:var(--H);top:calc(var(--T) + var(--H) / 2)}
.mqr-strip{position:fixed;z-index:89;left:50%;transform:translateX(-50%);top:calc(var(--T) + var(--H) + var(--G));height:var(--S);width:min(1040px,94vw);box-sizing:border-box;
  background:var(--paper);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.3);padding:14px 20px 16px;display:flex;flex-direction:column;gap:10px;animation:mqrUp .3s ease-out}
@keyframes mqrUp{from{transform:translate(-50%,8px);opacity:0}}
.mqr-strip .mq-sh{margin:0}
.mqs-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-height:0;flex:1}
.mqs-it{display:grid;grid-template-columns:92px 1fr;grid-template-rows:1fr auto;column-gap:12px;row-gap:6px;align-items:center;background:#fff;border-radius:10px;padding:10px;min-width:0}
.mqs-it a{display:contents;text-decoration:none;color:var(--ink)}
.mqs-th{grid-row:1/3;display:block;width:92px;height:92px}
.mqs-th img{width:92px;height:92px;object-fit:contain;display:block}
.mqs-it b{font:600 13.5px/1.25 var(--sans);align-self:end;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.mqs-it .btn{justify-self:start;align-self:start;padding:8px 10px;font-size:10px}
@media (max-width:760px){.mqr-it a{grid-template-columns:72px 1fr}.mqr-th,.mqr-th img{width:72px;height:72px}
  .mqr-has-strip,.mqr-strip{--S:226px;--G:10px;--H:calc(100dvh - var(--S) - var(--G) - 24px)}
  .mqr-strip{padding:10px 10px 12px;gap:8px}.mqr-strip .mq-sh{font-size:14px}
  .mqs-row{gap:8px}
  .mqs-it{display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:6px}
  .mqs-it a{display:flex;flex-direction:column;gap:5px}
  .mqs-th{width:100%;height:auto;aspect-ratio:1}.mqs-th img{width:100%;height:100%}
  .mqs-it b{font-size:11px;line-height:1.2;-webkit-line-clamp:2;min-height:2.4em}
  .mqs-it .btn{margin-top:auto;align-self:stretch;justify-content:center;padding:7px 3px;font-size:8.5px;letter-spacing:.05em}}
/* /locker/all 'For you' = their garments stacked on the rack (her rod-wide.webp, lengthened like the Shop rack preview; tinted white) */
.lk-photo.lk-rack{position:relative;--rs:.2;overflow:hidden}
.lkr-rod{position:absolute;left:3%;right:3%;top:0;height:calc(406px * var(--rs));border-style:solid;border-width:0 calc(160px * var(--rs));border-image:url(/assets/rack/rod-wide.webp) 0 160 0 160 fill stretch;filter:invert(1) brightness(1.18) drop-shadow(0 1px 1.5px rgba(0,0,0,.28));pointer-events:none;z-index:1}
.lkr-j{position:absolute;top:calc(378px * var(--rs) - 5px);z-index:calc(2 + var(--k));transform-origin:50% 0;animation:sway 7s ease-in-out infinite;animation-delay:calc(var(--k) * -1.7s)}
.lk-photo.lk-rack img{height:auto;object-fit:contain}
.lkr-j .oh-hook{width:14%;max-width:26px}
.lkr-j:hover{z-index:30}
@media (max-width:760px){.lk-photo.lk-rack{--rs:.15}}
/* ===== end MINI ME SQUARES 1019 ===== */
/* ===== FOOTER IG 1019: filled Instagram glyph sits on the footer's small text, same colour as the footer links ===== */
footer a.fig{white-space:nowrap;color:inherit}
footer a.fig::after{content:' · ';white-space:pre}
footer .fig-row{display:inline;font:500 11.5px/normal var(--mono)}  /* same strut as footer .mono, so the wrapped line keeps its old spacing */
footer a.fig .fig-ic{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;margin-right:5px}
footer a.fig:hover span{text-decoration:underline}
/* ===== end FOOTER IG 1019 ===== */
/* ===== FOOTER ROW 1019: studio-of-one line · Contact · IG · © (SEED.footerRow1019). Her website note sits just above the footer. ===== */
.fbstrip.fr19-note{margin:0}
footer .fr19-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;font:500 11.5px/1.4 var(--mono);color:var(--mute)}
footer .fr19-one{color:inherit}
footer a.fr19-contact{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid currentColor;border-radius:2px;font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);transition:background .15s,color .15s}
footer a.fr19-contact:hover{background:var(--ink);color:var(--paper)}
footer a.fr19-ig{display:inline;white-space:nowrap;color:inherit}
footer a.fr19-ig .fig-ic{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;margin-right:5px}
footer a.fr19-ig:hover span{text-decoration:underline}
footer .fr19-c{font-size:10.5px;opacity:.85}
body.kl-page footer .fr19-row{color:var(--klmute)}
@media (max-width:760px){footer .fr19-row{gap:10px 14px}}
/* ===== end FOOTER ROW 1019 ===== */
/* ===== PICKS NO GLOW 1019 (Jordi Oct 19 8:58 PM): "I don't understand why we made the font glow ... remove the blur from the text."
   Takes off the paper-coloured text-shadow glow that SHOP PICKS PHOTO 1019 put on "(it's me, I'm the coach)", "my bestsellers", "4 pieces · Shop all".
   Text is crisp; same words, same place. Photo + Polaroids untouched. ===== */
.cats-grid.picks-photo .ca-sub,.cats-grid.picks-photo .ca-top .mono,.cats-grid.picks-photo .ca-top .mono *,.cats-grid.picks-photo .ca-coach,
.cats-grid.picks-photo .ca-top,.cats-grid.picks-photo .ca-top *{text-shadow:none !important}
/* ===== end PICKS NO GLOW 1019 ===== */
/* ===== BOARD TITLE STRIP 1019 (Jordi Oct 19 8:59 PM) — html.bts-on (SEED.boardTitleStrip). /request only.
   (a) the steps row ends right under step 01 (the longest) with a thin rule running edge to edge, same colour as the section's own rule (#d6d2cb);
   (b) "Welcome to your custom order board" + grey line sit on a full-width white strip. Wording untouched. ===== */
html.bts-on .tw.tw-req{overflow-x:clip}
html.bts-on .tw-req .tw-cards{position:relative}
html.bts-on .tw-req .tw-cards li{min-height:0;padding-bottom:calc(var(--u) * 26)}
html.bts-on .tw-req .tw-cards::after{content:"";position:absolute;left:calc(50% - 50vw);width:100vw;bottom:0;height:1px;background:#d6d2cb;pointer-events:none}
html.bts-on .bh-sec{background:#fff;padding:clamp(34px,3.6vw,54px) 0 clamp(30px,3.2vw,46px);margin-bottom:clamp(20px,2.2vw,32px)}
@media (max-width:760px){
  html.bts-on .tw-req .tw-cards li{padding-bottom:22px}
  html.bts-on .bh-sec{padding:28px 0 24px;margin-bottom:18px}
}
/* ===== end BOARD TITLE STRIP 1019 ===== */
/* ===== PICKS SOLID INK 1019 (with PICKS NO GLOW 1019; SEED.shopPicksSolidInk, ?picksink=0 = old light grey): solid, no glow ===== */
.cats-grid.picks-photo.picks-ink .ca-sub,.cats-grid.picks-photo.picks-ink .ca-top .mono{color:#5b5953}
.cats-grid.picks-photo.picks-ink .ca-top .mono .txtlink{color:var(--ink)}
.cats-grid.picks-photo.picks-ink .p2-vd{background:#f8f7f4;color:#5b5953}
/* ===== end PICKS SOLID INK 1019 ===== */
/* ===== SHOP CAT WARM 1019 (Jordi Oct 19 8:58 PM; SEED.shopCatWarm / ?catwarm=1): Shop by Category in beige/peach instead of black ===== */
#bycat.cats-warm .cat{color:var(--ink);border-right-color:#e2d4c1}
#bycat.cats-warm .cat-vp{border-color:#e2d4c1}
#bycat.cats-warm .cat-txt .mono{color:#8a7d6c}
#bycat.cats-warm .cat-sub{color:#5b5953}
#bycat.cats-warm .cat:after{background:var(--ink)}
#bycat.cats-warm .cat-img{filter:drop-shadow(0 16px 20px rgba(90,60,30,.22))}
/* ===== end SHOP CAT WARM 1019 ===== */
/* ===== MASCOT TO BOARD 1019 ===== */
.meet-ctas{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.meet-ctas .btn{margin:0}
.mb-pin{position:relative;display:flex;align-items:center;gap:12px;width:max-content;max-width:92vw;margin:14px auto;padding:10px 40px 10px 12px;background:#fffdf8;border-radius:6px;box-shadow:0 8px 22px rgba(40,30,10,.16);transform:rotate(-1.5deg)}
.mb-pin .mcard-badge{float:none;margin:0;width:64px;height:64px}
.mb-pin b.hand{font-size:22px;color:#24418a;font-weight:400}
.mb-x{all:unset;cursor:pointer;position:absolute;right:10px;top:8px;font-size:18px;line-height:1}
/* ===== end MASCOT TO BOARD 1019 ===== */
/* ===== PHOTO EYE 1019: Owner → Photos (square tiles, option A square corners; dashboard palette only) ===== */
.dshl .dsh .pe-sec{border-radius:0}
.pe-how{margin:-6px 0 18px;font:400 14px/1.5 var(--sans);color:var(--g)}
.pe-g{padding:22px 0 4px;border-top:1px solid #ebe5df}
.pe-g:first-of-type{border-top:0}
.pe-gh{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:12px}
.pe-gh b{display:block;font:italic 400 19px/1.2 var(--serif);color:var(--k)}
.pe-gh small{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--g)}
.pe-view{flex:none;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--g);text-decoration:none}
.pe-view:hover{color:var(--k)}
.pe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.pe-sep{grid-column:1/-1;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--g);padding-top:6px}
.pe-t{position:relative;margin:0;display:flex;flex-direction:column;gap:7px;min-width:0}
.pe-img{display:block;aspect-ratio:1/1;background:var(--cream);overflow:hidden;transition:background .2s}
.pe-t.is-lib .pe-img{background:#fff;box-shadow:inset 0 0 0 1px #ebe5df}
.pe-img img{width:100%;height:100%;object-fit:contain;display:block;transition:filter .25s,opacity .25s}
.pe-t figcaption{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--g);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pe-t figcaption b{font-weight:400;color:var(--k)}
.pe-eye{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;top:8px;right:8px;width:32px;height:32px;display:grid;place-items:center;background:#fff;color:var(--k);box-shadow:0 2px 8px rgba(59,42,32,.14);transition:background .2s,color .2s,transform .15s}
.pe-eye:hover{transform:translateY(-1px)}
.pe-eye:focus-visible{outline:2px solid var(--k);outline-offset:2px}
.pe-eye.busy{opacity:.6;pointer-events:none}
.pe-t.is-off .pe-img{background:#ebe5df}
.pe-t.is-off .pe-img img{filter:grayscale(1);opacity:.35}
.pe-t.is-off .pe-eye{background:var(--k);color:#fff}
.pe-t.is-off .pe-eye svg path:nth-child(2){stroke:var(--k)}
@media (max-width:760px){.pe-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pe-eye{width:36px;height:36px}}
/* PHOTO EYE 1019 · TRASH: filled bin left of the eye + small in-page confirm (white / cream / deep brown, square corners) */
.pe-trash{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;top:8px;right:46px;width:32px;height:32px;display:grid;place-items:center;background:#fff;color:var(--g);box-shadow:0 2px 8px rgba(59,42,32,.14);transition:color .2s,background .2s,transform .15s}
.pe-trash:hover{color:var(--k);transform:translateY(-1px)}
.pe-trash:focus-visible{outline:2px solid var(--k);outline-offset:2px}
.pe-trash.busy{opacity:.6;pointer-events:none}
@media (max-width:760px){.pe-trash{width:36px;height:36px;right:50px}}
.pe-cf-bg{position:fixed;inset:0;z-index:10040;background:rgba(59,42,32,.28)}
.pe-cf{position:fixed;z-index:10050;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,92vw);display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:start;background:#fff;padding:24px;box-shadow:0 24px 60px rgba(59,42,32,.18)}
.pe-cf-img{display:block;aspect-ratio:1/1;background:#f8f5f0}.pe-cf-img img{width:100%;height:100%;object-fit:contain;display:block}
.pe-cf-h{font:italic 300 26px/1.1 var(--serif);color:#3b2a20;margin:0 0 8px;letter-spacing:-.01em}
.pe-cf-p{font:400 14px/1.5 var(--sans);color:#3b2a20;margin:0 0 8px}.pe-cf-p b{font-weight:500}
.pe-cf-fine{font:400 12.5px/1.5 var(--sans);color:#8c7b6f;margin:0 0 16px}
.pe-cf-btns{display:flex;gap:10px}
.pe-cf-btns button{all:unset;box-sizing:border-box;cursor:pointer;padding:11px 20px;font:400 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase}
.pe-cf-btns .pe-cf-del{background:#3b2a20;color:#fff}.pe-cf-btns .pe-cf-del[disabled]{opacity:.45;cursor:default}
.pe-cf-btns .pe-cf-keep{background:#f8f5f0;color:#3b2a20}
.pe-cf-btns button:focus-visible{outline:2px solid #3b2a20;outline-offset:2px}
@media (max-width:760px){.pe-cf{grid-template-columns:1fr;padding:22px 20px}.pe-cf-img{width:110px}}
/* ===== end PHOTO EYE 1019 ===== */
/* ===== MASCOT MINE 1019: mascot "Make it yours" overlay — left: the mascot art only (flat, no rod/hanger/labels/thumbs); right: the Make it yours form ===== */
.mmy{z-index:95}
.mmy-panel{position:relative;width:min(1120px,100%);height:min(860px,calc(100vh - 40px));background:#fff;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden;animation:sklIn .35s cubic-bezier(.2,.8,.2,1) both}
.mmy-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);height:100%}
.mmy-art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px;background:#fff}
.mmy-art img{width:100%;max-width:440px;max-height:68vh;object-fit:contain;display:block}
.mmy-artn{font-size:30px;color:#24418a;transform:rotate(-2deg)}
.mmy-side{overflow:auto;padding:26px 34px 30px 10px;overscroll-behavior:contain}
.mmy .mm-form{max-height:none;overflow:visible;opacity:1;margin-top:0;padding:0;border-top:0;transition:none}
.mmy .mmy-form>.field,.mmy .mmy-form .field{max-width:none}
.mmy .mm-h{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #1b1b1b;padding-top:14px;margin-bottom:12px}
.mmy .mm-h h3{margin:0}
.mmy .mm-close{border:0;background:none;cursor:pointer;letter-spacing:.14em;font-size:10px;text-transform:uppercase;border-bottom:1px solid currentColor;padding:0 0 1px}
.mmy .row2{display:grid;grid-template-columns:1fr 110px;gap:12px}
.mmy-pills{padding:4px 0 2px}
.mmy-pill{cursor:pointer;font:600 13px/1.1 var(--sans);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 8px rgba(0,0,0,.1)}
.mmy-pill small{font-weight:400;font-size:11px;color:#777;margin-left:2px}
.mmy-pill.on small{color:#d8d8d8}
.mmy-q.need>span{color:#c0392b}
.mmy-q.need .mmy-pill{box-shadow:0 0 0 1.5px #d9534f}
.mmy-q.shake,.mmy .btn.shake{animation:mmShake .45s cubic-bezier(.36,.07,.19,.97)}
.mmy-sz{margin:4px 0 8px;border:1px solid var(--line);border-radius:3px;background:#fbfaf7}
.mmy-sz>summary{cursor:pointer;padding:10px 12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between}
.mmy-sz>summary::-webkit-details-marker{display:none}
.mmy-sz>summary::after{content:'+';font-size:14px;line-height:1}
.mmy-sz[open]>summary::after{content:'−'}
.mmy-sz .mmy-pills{padding:0 10px 12px}
.mmy-seent{display:block;margin-top:12px}
.mmy-seent>span{display:block;font:600 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.mmy-add{margin-top:6px}
.meet-ctas .mmy-open{margin:0}
@media (max-width:760px){
  .mmy{padding:0;place-items:end center}
  .mmy-panel{width:100%;height:calc(100vh - 28px);height:calc(100dvh - 28px);border-radius:14px 14px 0 0;overflow:auto}
  .mmy-in{display:block;height:auto}
  .mmy-art{padding:22px 20px 6px}
  .mmy-art img{max-width:220px;max-height:30vh}
  .mmy-artn{font-size:24px}
  .mmy-side{overflow:visible;padding:8px 16px 28px}
}
/* ===== end MASCOT MINE 1019 ===== */
/* MASCOT MINE 1019 (10:14 PM): size = two side-by-side native dropdowns, styled like the form inputs; stacked on phones */
.mmy-szrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mmy-szsel{display:block}
.mmy-szl{display:block;font:600 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#777;margin:0 0 6px}
.mmy .mmy-szsel select{width:100%;font:16px/1.5 var(--sans);border:1px solid var(--line);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;border-radius:3px;padding:13px 40px 13px 14px;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.mmy .mmy-szsel select:focus{border-color:var(--ink)}
.mmy-size.need select{border-color:#d9534f;background-color:#fff7f6}
@media (max-width:760px){.mmy-szrow{grid-template-columns:1fr}}
/* ===== LOCKER BOX BLEND 1019 (10:16 PM): the /locker box photo panel had hard edges (photo tone ≠ the #f3ead9 panel, and the panel stopped in a hard line
   against the paper strip below). Since the 55% split (9ca45c4, Oct 18 7:36 PM) the photo's right/top edges sit inside the panel. Feather the photo into
   the panel and fade the panel's foot into the page paper. Remove this block = before. ===== */
.bxsc{background:linear-gradient(to bottom,#f3ead9 0,#f3ead9 calc(100% - 90px),var(--paper,#f8f7f4) 100%)}
.bxsc-split .bxsc-bg{-webkit-mask-image:linear-gradient(to right,#000 0,#000 80%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 82%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,#000 0,#000 80%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 82%,transparent 100%);mask-composite:intersect}
@media (max-width:900px){.bxsc-split .bxsc-bg{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 86%,transparent 100%)}
  .bxsc{background:#f3ead9}}
/* ===== end LOCKER BOX BLEND 1019 ===== */
/* ===== CLAUDE BOARD 1019 (styles): her board CSS, scoped to .cb19, v2 = all of her board CSS, then our 01 titles + hang tags, then layout glue ===== */
.cb19{--cb-serif:"DM Serif Display",serif;--cb-sans:"Barlow",sans-serif;--cb-cond:"Barlow Condensed",sans-serif;--cb-hand:"Caveat",cursive}
.cb19{--cb-w:#FFFFFF;--cb-cream:#FAF9F7;--cb-cream2:#F2F0EC;
  --cb-ink:#111110;--cb-mid:#585552;--cb-light:#A8A5A0;--cb-ghost:#D4D1CC;
  --cb-blue:#D6E8F2;--cb-blue2:#B4CEDF;--cb-blue3:#6A9EBC;
  --cb-yellow:#F8EFA0;--cb-yellow2:#EEE080;--cb-red:#C03828;
  --cb-b:rgba(17,17,16,0.08);--cb-bm:rgba(17,17,16,0.14);
  background:#F9F8F6;}
.cb19.cb19 .shell{display:grid;grid-template-columns:1fr 380px;grid-template-areas:'feed board';height:100vh;}
.cb19.cb19 .ql{grid-area:feed;overflow-y:auto;background:#F9F8F6;scroll-behavior:smooth;}
.cb19.cb19 .ql::-webkit-scrollbar{width:3px;}
.cb19.cb19 .ql::-webkit-scrollbar-thumb{background:var(--cb-ghost);}
.cb19.cb19 .qr{grid-area:board;display:flex;flex-direction:column;background:var(--cb-cream);border-left:1px solid var(--cb-b);height:100vh;}
@media(max-width:860px){.cb19.cb19 .shell{display:block;height:auto;min-height:calc(var(--vvh,100vh));}.cb19.cb19 .qr{position:sticky;top:0;z-index:60;height:calc(var(--vvh,100vh)*0.34);border-left:none;border-bottom:1.5px solid var(--cb-bm);box-shadow:0 10px 28px rgba(0,0,0,0.09);}.cb19.cb19 .ql{overflow:visible;height:auto;min-height:calc(var(--vvh,100vh)*0.6);}.cb19.cb19 .chips-wrap{top:calc(var(--vvh,100vh)*0.34);}.cb19.cb19 .qr-bar{min-height:48px;padding:6px 14px;}.cb19.cb19 .qr-est-num{font-size:22px;}.cb19.cb19 .qr .fold{transform:rotate(-1.5deg) scale(.74);transform-origin:top center;margin-bottom:-46px;}.cb19.cb19 .qr-send{padding:6px 10px 7px;}.cb19.cb19 .qr-send-btn{padding:9px 14px;font-size:13px;}.cb19.cb19 .qr-empty{padding:14px 8px;}.cb19.cb19 .qr-empty-head{font-size:18px;margin-bottom:10px;}.cb19.cb19 .qr-empty-circle{width:34px;height:34px;font-size:18px;margin-bottom:8px;}}
.cb19.cb19 .fcard{position:relative;}
.cb19.cb19 .fback{position:absolute;top:14px;right:14px;font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--cb-light);background:none;border:1px solid var(--cb-b);border-radius:20px;padding:5px 10px;cursor:pointer;transition:all .14s;}
.cb19.cb19 .fback:hover{color:var(--cb-ink);border-color:var(--cb-bm);}
.cb19.cb19 .opt.glow,.cb19.cb19 .pola.glow{border-color:#9CCBEB;box-shadow:0 0 0 2px #B9DCF3,0 0 18px 3px rgba(120,185,230,.55);}
.cb19.cb19 .glow-tag{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:.14em;text-transform:uppercase;color:#3F7FA8;background:#E3F1FA;padding:3px 7px;border-radius:10px;margin-top:6px;}
.cb19.cb19 .glow-hint{font-size:12px;color:#3F7FA8;background:#EEF7FC;border:1px solid #D3E9F6;padding:8px 10px;border-radius:6px;margin:-4px 0 12px;line-height:1.45;}
.cb19.cb19 .polagrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;padding:6px 2px 4px;}
.cb19.cb19 .pola{background:#fff;padding:8px 8px 10px;box-shadow:0 2px 10px rgba(0,0,0,.10);border:1px solid var(--cb-b);transition:transform .15s,box-shadow .15s;position:relative;}
.cb19.cb19 .pola:nth-child(odd){transform:rotate(-1.2deg);}
.cb19.cb19 .pola:nth-child(even){transform:rotate(1deg);}
.cb19.cb19 .pola:hover{transform:rotate(0) translateY(-2px);}
.cb19.cb19 .pola.on{outline:2px solid var(--cb-ink);outline-offset:2px;}
.cb19.cb19 .pola-img{aspect-ratio:1/1;background:var(--cb-cream2);overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.cb19.cb19 .pola-img img{width:100%;height:100%;object-fit:cover;display:block;}
.cb19.cb19 .pola-q{font-family:'DM Serif Display',serif;font-size:44px;color:var(--cb-ghost);}
.cb19.cb19 .pola-name{font-family:'DM Serif Display',serif;font-style:italic;font-size:16px;color:var(--cb-ink);margin-top:8px;line-height:1.15;}
.cb19.cb19 .pola-sub{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:.06em;color:var(--cb-light);margin-top:3px;line-height:1.5;}
.cb19.cb19 .pola-acts{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:6px;}
.cb19.cb19 .pola-what,.cb19.cb19 .dm-what{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cb-mid);background:none;border:none;border-bottom:1px dashed var(--cb-ghost);padding:2px 0;cursor:pointer;}
.cb19.cb19 .pola-what:hover,.cb19.cb19 .dm-what:hover{color:var(--cb-ink);}
.cb19.cb19 .pola-ok{width:30px;height:30px;border-radius:50%;border:1px solid var(--cb-bm);background:var(--cb-cream);cursor:pointer;font-size:13px;color:var(--cb-ink);transition:all .14s;}
.cb19.cb19 .pola.on .pola-ok,.cb19.cb19 .pola-ok:hover{background:var(--cb-ink);color:#fff;border-color:var(--cb-ink);}
.cb19.cb19 .info-gal{background:var(--cb-cream2);}
.cb19.cb19 .pv .info-main{width:100%;max-height:44vh;object-fit:contain;display:block;}
.cb19.cb19 .info-thumbs{display:flex;gap:6px;padding:6px 8px 8px;overflow-x:auto;}
.cb19.cb19 .pv .info-thumbs img{width:54px;height:54px;object-fit:cover;cursor:pointer;opacity:.6;border:1px solid var(--cb-b);flex-shrink:0;max-height:none;}
.cb19.cb19 .info-thumbs img.on{opacity:1;border-color:var(--cb-ink);}
.cb19.cb19 .info-empty{height:150px;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--cb-light);}
.cb19.cb19 .info-price{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.1em;color:var(--cb-mid);margin:-6px 0 10px;}
.cb19.cb19 .dlist{display:flex;flex-direction:column;gap:7px;margin-bottom:4px;}
.cb19.cb19 .dspot{border:1px solid var(--cb-b);background:var(--cb-cream);border-radius:3px;transition:all .15s;}
.cb19.cb19 .dspot.set{background:var(--cb-yellow);border-color:var(--cb-yellow2);}
.cb19.cb19 .dspot-h{display:flex;align-items:center;gap:10px;padding:11px 12px;cursor:pointer;}
.cb19.cb19 .dspot-plus{width:22px;height:22px;border-radius:50%;border:1px solid var(--cb-bm);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;background:#fff;}
.cb19.cb19 .dspot-n{font-family:'DM Serif Display',serif;font-size:15px;color:var(--cb-ink);flex:1;}
.cb19.cb19 .dspot-n small{font-family:'Barlow',sans-serif;font-size:11px;color:var(--cb-light);margin-left:4px;}
.cb19.cb19 .dspot-v{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.06em;color:var(--cb-mid);}
.cb19.cb19 .dspot-car{font-size:12px;color:var(--cb-light);transition:transform .2s;}
.cb19.cb19 .dspot.open .dspot-car{transform:rotate(180deg);}
.cb19.cb19 .dspot-body{display:none;padding:0 12px 12px 44px;}
.cb19.cb19 .dspot.open .dspot-body{display:block;}
.cb19.cb19 .dm{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px dashed var(--cb-ghost);}
.cb19.cb19 .dm-main{display:flex;align-items:center;gap:9px;flex:1;cursor:pointer;}
.cb19.cb19 .dm-radio{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--cb-bm);background:#fff;flex-shrink:0;}
.cb19.cb19 .dm.on .dm-radio{border-color:var(--cb-ink);background:radial-gradient(circle,var(--cb-ink) 0 4px,#fff 4.5px);}
.cb19.cb19 .dm-n{font-size:13px;color:var(--cb-ink);}
.cb19.cb19 .dm-n i{color:var(--cb-light);font-style:normal;font-size:11px;}
.cb19.cb19 .dm-p{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:8.5px;color:var(--cb-mid);}
.cb19.cb19 .dm-clear{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cb-red);background:none;border:none;cursor:pointer;margin-top:6px;padding:0;}
.cb19.cb19 .prof-note{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:#3F7FA8;background:#E3F1FA;padding:4px 8px;border-radius:10px;font-style:normal;}
.cb19.cb19 .fwho{display:flex;flex-direction:column;gap:6px;}
.cb19.cb19 .fw-row{display:flex;align-items:center;gap:10px;border:1px solid var(--cb-b);background:var(--cb-cream);padding:8px 10px;border-radius:3px;transition:all .14s;}
.cb19.cb19 .fw-row.on{background:var(--cb-blue);border-color:var(--cb-blue2);}
.cb19.cb19 .fw-chk{width:16px;height:16px;border:1.5px solid var(--cb-bm);background:#fff;border-radius:3px;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;}
.cb19.cb19 .fw-row.on .fw-chk{background:var(--cb-ink);border-color:var(--cb-ink);color:#fff;}
.cb19.cb19 .fw-n{flex:1;font-size:13px;color:var(--cb-ink);cursor:pointer;}
.cb19.cb19 .fw-n input{width:100%;border:none;border-bottom:1px solid var(--cb-bm);background:transparent;font-size:13px;padding:2px 0;outline:none;font-family:'Barlow',sans-serif;}
.cb19.cb19 .fw-size{display:flex;align-items:center;gap:5px;}
.cb19.cb19 .fw-size span{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--cb-light);}
.cb19.cb19 .fw-size input{width:74px;border:none;border-bottom:1px solid var(--cb-bm);background:transparent;font-size:13px;padding:2px 0;outline:none;font-family:'Barlow',sans-serif;}
.cb19.cb19 .fw-add{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--cb-mid);background:none;border:1px dashed var(--cb-bm);padding:9px;cursor:pointer;border-radius:3px;}
.cb19.cb19 .addph{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--cb-ink);border:1px solid var(--cb-bm);padding:8px 12px;cursor:pointer;background:var(--cb-cream);border-radius:3px;}
.cb19.cb19 .nphotos{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.cb19.cb19 .nphoto{position:relative;width:60px;height:60px;}
.cb19.cb19 .nphoto img{width:100%;height:100%;object-fit:cover;border:1px solid var(--cb-b);}
.cb19.cb19 .nphoto button{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:none;background:var(--cb-ink);color:#fff;font-size:9px;cursor:pointer;}
.cb19.cb19 .tlmsg{margin-top:18px;padding:12px 14px;background:var(--cb-cream);border:1px solid var(--cb-b);border-left:3px solid var(--cb-ink);}
.cb19.cb19 .tlmsg.rush{border-left-color:var(--cb-red);}
.cb19.cb19 .tl-you{font-family:'DM Serif Display',serif;font-size:15px;color:var(--cb-ink);line-height:1.35;}
.cb19.cb19 .tl-switch{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--cb-mid);background:none;border:none;border-bottom:1px dashed var(--cb-ghost);padding:2px 0;margin-top:8px;cursor:pointer;}
.cb19.cb19 .tl-sw{display:none;margin-top:8px;gap:6px;flex-direction:column;}
.cb19.cb19 .tl-sw.show{display:flex;}
.cb19.cb19 .tl-sw-o{padding:8px 10px;border:1px solid var(--cb-b);background:#fff;cursor:pointer;font-size:12px;color:var(--cb-mid);}
.cb19.cb19 .tl-sw-o b{font-family:'DM Serif Display',serif;font-weight:400;font-size:14px;color:var(--cb-ink);margin-right:4px;}
.cb19.cb19 .tl-sw-o.on{background:var(--cb-yellow);border-color:var(--cb-yellow2);}
.cb19.cb19 .dep{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px 14px;border:1px solid var(--cb-bm);background:#fff;cursor:pointer;font-size:13px;line-height:1.45;color:var(--cb-ink);}
.cb19.cb19 .dep input{width:17px;height:17px;margin-top:1px;flex-shrink:0;accent-color:#111110;}
.cb19.cb19 .fbtn.ghost{background:var(--cb-cream);color:var(--cb-ink);border:1px solid var(--cb-bm);}
.cb19.cb19 .mini-box{border:1px solid var(--cb-b);background:var(--cb-cream);padding:12px;margin-top:8px;}
.cb19.cb19 .mini-done{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#3F7FA8;margin-top:8px;display:none;}
.cb19.cb19 .mini-done.show{display:block;}
.cb19.cb19 .receipt-paper{background:none !important;animation:none !important;display:flex;flex-direction:column;align-items:center;width:370px;}
.cb19.cb19 .receipt-printer{position:sticky;top:0;z-index:2;width:100%;height:58px !important;background:linear-gradient(#3A3733,#24221F) !important;border-radius:10px 10px 4px 4px;box-shadow:0 6px 14px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:flex-end !important;padding-bottom:9px;}
.cb19.cb19 .receipt-printer::before{content:'';position:absolute;top:12px;right:16px;width:7px;height:7px;border-radius:50%;background:#7BD88F;box-shadow:0 0 6px #7BD88F;animation:cb19-pulse 1s infinite;}
.cb19.cb19 .receipt-printer::after{content:'DIRTY DENIM · PRINTING';position:absolute;top:11px;left:16px;font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:.2em;color:rgba(255,255,255,.35);}
.cb19.cb19 .receipt-slot{width:88% !important;height:6px !important;background:#0E0D0C !important;border-radius:3px !important;box-shadow:inset 0 2px 3px rgba(0,0,0,.8);}
.cb19.cb19 .receipt-feed{width:82%;overflow:hidden;margin-top:-3px;padding-bottom:10px;}
.cb19.cb19 .receipt-body{clip-path:inset(0 0 100% 0);animation:cb19-print-out 2s steps(22,end) .15s forwards;box-shadow:0 8px 18px rgba(0,0,0,.25);background:var(--cb-w) linear-gradient(transparent 0,transparent) !important;position:relative;}
.cb19.cb19 .receipt-body::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(-45deg,transparent 6px,var(--cb-w) 0) 0 0/12px 8px,linear-gradient(45deg,transparent 6px,var(--cb-w) 0) 0 0/12px 8px;}
@keyframes cb19-print-out{to{clip-path:inset(0 0 -12px 0);}}
.cb19.cb19 .receipt-actions{flex-direction:column;}
.cb19.cb19 .r-btn-send{flex:none !important;}
.cb19.cb19 .dspot-inc{display:block;font-family:'Barlow',sans-serif;font-size:11px;color:var(--cb-light);line-height:1.4;margin-top:2px;}
.cb19.cb19 .dm-note{font-size:13px;margin-top:8px;}
.cb19.cb19 .qr-tabs{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap;}
.cb19.cb19 .qr-tabs:empty{display:none;}
.cb19.cb19 .qtab{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--cb-bm);background:#fff;color:var(--cb-ink);padding:4px 8px;border-radius:12px;cursor:pointer;white-space:nowrap;}
.cb19.cb19 .qtab span{color:#3F7FA8;margin-left:3px;}
.cb19.cb19 .qtab.cur{background:var(--cb-ink);color:#fff;border-color:var(--cb-ink);}
.cb19.cb19 .qtab.cur span{color:var(--cb-yellow);}
.cb19.cb19 .qtab:hover{border-color:var(--cb-ink);}
.cb19.cb19 .stk-po{grid-column:1/-1;display:flex;align-items:center;gap:14px;cursor:pointer;position:relative;
  background:linear-gradient(135deg,#FFE680 0%,#F8D94A 55%,#F2B93B 100%);border:2px solid var(--cb-ink);border-radius:14px;
  padding:12px 16px 12px 12px;box-shadow:3px 4px 0 var(--cb-ink);transform:rotate(-1deg);transition:transform .18s,box-shadow .18s;margin-bottom:4px;}
.cb19.cb19 .stk-po:hover{transform:rotate(0) translateY(-2px);box-shadow:4px 6px 0 var(--cb-ink);}
.cb19.cb19 .stk-po.on{background:linear-gradient(135deg,#FFE680,#F2B93B);outline:3px solid var(--cb-red);outline-offset:3px;transform:rotate(0);}
.cb19.cb19 .stk-po-ic svg{width:74px;height:auto;display:block;filter:drop-shadow(1px 2px 0 rgba(0,0,0,.25));}
.cb19.cb19 .stk-po-txt{flex:1;min-width:0;}
.cb19.cb19 .stk-po-name{font-family:'Bowlby One',Impact,'Arial Black',sans-serif;font-size:24px;line-height:1;color:var(--cb-ink);letter-spacing:.01em;}
.cb19.cb19 .stk-po-name small{display:block;font-family:'DM Serif Display',serif;font-style:italic;font-size:14px;letter-spacing:0;margin-top:3px;color:#5A3A0C;}
.cb19.cb19 .stk-po-sub{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:.08em;color:#5A3A0C;margin-top:6px;line-height:1.5;}
.cb19.cb19 .stk-po-go{font-family:'Bowlby One',Impact,sans-serif;font-size:11px;background:var(--cb-red);color:#fff;border-radius:20px;padding:7px 12px;white-space:nowrap;box-shadow:1px 2px 0 var(--cb-ink);}
.cb19.cb19 .po-hype{display:none;margin:12px 0 2px;padding:10px 14px;border-radius:10px;background:#FFF4C2;border:1.5px dashed #E0B93A;
  font-family:'DM Serif Display',serif;font-size:16px;line-height:1.35;color:var(--cb-ink);}
.cb19.cb19 .po-hype.show{display:block;}
.cb19.cb19 #who-grp{position:relative;overflow:visible;}
.cb19.cb19 .burst{position:absolute;top:-66px;right:-16px;width:150px;height:96px;cursor:pointer;z-index:3;transform:rotate(8deg);transition:transform .18s;animation:cb19-burst-wiggle 2.4s ease-in-out infinite;}
.cb19.cb19 .burst:hover{transform:rotate(3deg) scale(1.06);animation:none;}
.cb19.cb19 .burst svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.25));}
.cb19.cb19 .burst-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 26px;
  font-family:'Bowlby One',Impact,'Arial Black',sans-serif;font-size:10.5px;line-height:1.05;color:var(--cb-ink);}
.cb19.cb19 .burst-txt b{font-size:13px;color:var(--cb-red);font-weight:400;}
@keyframes cb19-burst-wiggle{0%,100%{transform:rotate(8deg);}50%{transform:rotate(4deg) scale(1.03);}}
@media(max-width:860px){.cb19.cb19 .burst{width:120px;height:78px;top:-60px;right:-8px;}.cb19.cb19 .burst-txt{font-size:9.5px;padding:0 22px;}.cb19.cb19 .stk-po-name{font-size:20px;}.cb19.cb19 .stk-po-ic svg{width:60px;}.cb19.cb19 .stk-po-go{display:none;}}
.cb19.cb19 #fc-piece:not(.in){transform:translateY(-34px);}
.cb19.cb19 #fc-piece{transition:opacity .45s ease,transform .45s cubic-bezier(.2,.9,.3,1.2);}
.cb19.cb19 .stk-po2{grid-column:2;}
.cb19.cb19 .stk-po2 .stk-ic svg{height:62px;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(1px 3px 3px rgba(0,0,0,0.22));}
.cb19.cb19 .po-choice{display:none;margin:16px 0 0;}
.cb19.cb19 .po-choice.show{display:block;animation:cb19-paper-in .35s ease;}
.cb19.cb19 .po-q{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:0.16em;color:var(--cb-light);text-transform:uppercase;margin-bottom:8px;}
.cb19.cb19 .po-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.cb19.cb19 .po-opt{padding:14px;border:1px solid var(--cb-b);background:var(--cb-cream);cursor:pointer;font-family:'DM Serif Display',serif;font-size:16px;color:var(--cb-ink);transition:all .16s;border-radius:2px;text-align:left;}
.cb19.cb19 .po-opt:hover{border-color:var(--cb-bm);}
.cb19.cb19 .po-opts.po-3{grid-template-columns:1fr 1fr 1fr;}
.cb19.cb19 .po-opt.on{background:var(--cb-blue);border-color:var(--cb-blue2);}
.cb19.cb19 .pin .bx,.cb19.cb19 .pin.bub .bx{top:-8px;left:-8px;transform:rotate(calc(var(--r,0deg) * -1));}
.cb19.cb19 .pin.bub .bx{top:0;left:-4px;}
.cb19.cb19 .qr-quote{display:none;flex-shrink:0;padding:8px 16px 10px;background:var(--cb-cream);font-family:'DM Serif Display',serif;font-style:italic;font-size:13px;line-height:1.4;color:var(--cb-mid);border-top:1px dashed var(--cb-b);}
.cb19.cb19 .qr-quote.show{display:block;}
@media(max-width:860px){.cb19.cb19 .qr-quote{font-size:11px;padding:4px 14px 6px;line-height:1.3;}}
.cb19.cb19 .qr-est-num s{text-decoration-thickness:2px;text-decoration-color:var(--cb-red);color:var(--cb-light);}
.cb19.cb19 .tb-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:6px;}
.cb19.cb19 .tb-opt{padding:10px 16px;border:1px solid var(--cb-b);background:var(--cb-cream);cursor:pointer;font-family:'DM Serif Display',serif;font-size:15px;color:var(--cb-ink);border-radius:2px;transition:all .15s;}
.cb19.cb19 .tb-opt:hover{border-color:var(--cb-bm);}
.cb19.cb19 .tb-opt.on{background:var(--cb-blue);border-color:var(--cb-blue2);}
.cb19.cb19 .tb-other{flex:1;min-width:150px;}
.cb19.cb19 .tdate-msg{display:none;margin-top:14px;padding:10px 14px;background:#FFF4C2;border:1.5px dashed #E0B93A;border-radius:10px;font-family:'DM Serif Display',serif;font-size:15px;line-height:1.4;color:var(--cb-ink);}
.cb19.cb19 .tdate-msg.show{display:block;}
.cb19.cb19 .fq-talk{font-size:14px;color:var(--cb-mid);line-height:1.65;margin:-4px 0 16px;}
.cb19.cb19 .team-center{position:absolute;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:2;}
.cb19.cb19 .team-center svg{width:128px;height:auto;display:block;margin:0 auto;filter:drop-shadow(1px 3px 3px rgba(0,0,0,.2));}
.cb19.cb19 .team-center-lb{font-family:'Bowlby One',Impact,'Arial Black',sans-serif;font-size:15px;color:var(--cb-ink);margin-top:4px;line-height:1.05;}
.cb19.cb19 .team-center-sub{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:.14em;text-transform:uppercase;color:var(--cb-light);margin-top:4px;}
.cb19.cb19 .pin.tp{width:31%;padding:12px 6px 9px;}
.cb19.cb19 .pin.tp .pin-ic svg{height:22px;}
.cb19.cb19 .pin.tp .pin-ic{margin-bottom:5px;}
.cb19.cb19 .pin.tp .pin-lb{font-size:7px;letter-spacing:.12em;line-height:1.6;}
.cb19.cb19 .pin.tp .pin-k{display:block;font-size:6px;margin-bottom:3px;background:none;padding:0;}
.cb19.cb19 .dm-done{font-family:'DM Serif Display',serif;font-style:italic;font-size:13px;background:var(--cb-ink);color:#fff;border:none;padding:6px 16px;cursor:pointer;}
.cb19.cb19 .receipt-feed{flex-shrink:0;}
.cb19.cb19 #fc-teampiece .stkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 10px;}
.cb19.cb19 .r-close{position:absolute;top:63px;right:calc(9% + 6px);z-index:5;width:22px;height:22px;border-radius:50%;border:1px solid var(--cb-bm);background:#fff;color:var(--cb-mid);font-size:11px;line-height:1;padding:0;cursor:pointer;}
.cb19.cb19 .po-hype.plain{background:none;border:none;padding:0;}
.cb19.cb19 .po-note{margin-top:12px;padding:10px 14px;border-radius:10px;background:#FFF4C2;border:1.5px dashed #E0B93A;font-family:'DM Serif Display',serif;font-size:16px;line-height:1.35;color:var(--cb-ink);}
@media(max-width:860px){.cb19.cb19 .stk-name{white-space:nowrap;}}
.cb19.cb19 #fc-piece .stkgrid{display:block;position:relative;height:272px;}
.cb19.cb19 #fc-piece .stk{position:absolute;width:auto;max-width:36%;transform:rotate(var(--r,0deg));}
.cb19.cb19 #fc-piece .stk:hover{transform:rotate(0deg) scale(1.08);z-index:3;}
.cb19.cb19 #fc-piece .stk.on{transform:rotate(0deg) scale(1.05);z-index:2;}
.cb19.cb19 #pc-jacket{left:3%;top:10px;--r:-8deg;}
.cb19.cb19 #pc-jacket .stk-ic svg{height:56px;}
.cb19.cb19 #pc-hoodie{left:25%;top:66px;--r:6deg;}
.cb19.cb19 #pc-hoodie .stk-ic svg{height:40px;}
.cb19.cb19 #pc-sweatset{left:50%;top:0;--r:-4deg;}
.cb19.cb19 #pc-sweatset .stk-ic svg{height:42px;}
.cb19.cb19 #pc-po{left:68%;top:44px;--r:4deg;}
.cb19.cb19 #pc-po .stk-ic svg{height:50px;}
.cb19.cb19 #pc-hat{left:5%;top:170px;--r:9deg;}
.cb19.cb19 #pc-hat .stk-ic svg{height:36px;}
.cb19.cb19 #pc-handpainted{left:42%;top:144px;--r:-6deg;}
.cb19.cb19 #pc-handpainted .stk-ic svg{height:50px;}
.cb19.cb19 #pc-other{left:64%;top:186px;--r:3deg;}
.cb19.cb19 #pc-other .stk-ic svg{height:34px;}
@media(max-width:860px){.cb19.cb19 #fc-piece .stkgrid{height:436px;}.cb19.cb19 #fc-piece .stk{max-width:46%;}.cb19.cb19 #pc-jacket{left:3%;top:4px;--r:-6deg;}.cb19.cb19 #pc-hoodie{left:60%;top:24px;--r:5deg;}.cb19.cb19 #pc-sweatset{left:8%;top:132px;--r:-3deg;}.cb19.cb19 #pc-po{left:50%;top:146px;--r:3deg;}.cb19.cb19 #pc-hat{left:4%;top:262px;--r:7deg;}.cb19.cb19 #pc-handpainted{left:56%;top:292px;--r:-5deg;}.cb19.cb19 #pc-other{left:16%;top:382px;--r:2deg;}.cb19.cb19 #pc-po .stk-ic svg{height:48px;}}
.cb19.cb19 .pin.stickynote{background:#F7E27A;font-family:var(--cb-hand,'Caveat',cursive);font-size:19px;line-height:1.15;color:#3E3A30;padding:16px 12px 14px;box-shadow:2px 4px 10px rgba(0,0,0,.14);}
.cb19.cb19 .pin.pop{animation:cb19-pin-pop .9s cubic-bezier(.3,1.6,.5,1) both;}
.cb19.cb19 .pin.pop::after{content:'✦ ✦';position:absolute;top:-14px;right:-6px;color:#C03828;font-size:12px;letter-spacing:6px;animation:cb19-pin-spark 1.2s ease both;}
@keyframes cb19-pin-pop{0%{transform:rotate(var(--r,0deg)) scale(.6);}55%{transform:rotate(calc(var(--r,0deg) - 6deg)) scale(1.18);}100%{transform:rotate(var(--r,0deg)) scale(1);}}
@keyframes cb19-pin-spark{0%{opacity:0;transform:scale(.4);}40%{opacity:1;transform:scale(1.2);}100%{opacity:0;transform:scale(1);}}
.cb19.cb19 .q1grid .po-rect{grid-column:1/-1;display:flex;align-items:center;gap:16px;background:#FFFBEA;border-color:#EBD58A;}
.cb19.cb19 .q1grid .po-rect .pc-ic{height:auto;margin:0;}
.cb19.cb19 .q1grid .po-rect .pc-ic svg{width:78px;height:auto;}
.cb19.cb19 .q1grid .po-rect.on{background:var(--cb-blue);border-color:var(--cb-blue2);}
.cb19.cb19 .pin.htpin{background:none;box-shadow:none;padding:0;width:30%;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(1px 4px 5px rgba(0,0,0,.14));}
.cb19.cb19 .pin.htpin .htcord{width:34px;height:28px;}
.cb19.cb19 .pin.htpin .htbody{padding:18px 8px 11px;}
.cb19.cb19 .pin.htpin .htic{height:26px;margin-bottom:6px;}
.cb19.cb19 .pin.htpin .htic svg{max-height:26px;}
.cb19.cb19 .pin.htpin .htname{font-size:13px;}
.cb19.cb19 .pin.stkpin{background:none;box-shadow:none;padding:0;width:auto;max-width:44%;display:flex;flex-direction:column;align-items:center;}
.cb19.cb19 .pin.stkpin .stk-ic svg{height:40px;width:auto;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(1px 3px 3px rgba(0,0,0,0.22));}
.cb19.cb19 .pin.stkpin .stk-name{font-size:12.5px;white-space:nowrap;}
.cb19.cb19 .pin.stkpin .stk-ic{position:relative;}
.cb19.cb19 .pin.stkpin .stk-ic .mm-kid{position:absolute;right:-15px;bottom:0;transform:none;}
.cb19.cb19 .pin.stkpin .stk-ic .mm-kid svg{height:24px;}
.cb19.cb19 .pin.tapepin{background:#FBFAF6;padding:14px 12px 11px;width:44%;box-shadow:0 2px 6px rgba(0,0,0,.12);}
.cb19.cb19 .pin.tapepin::before{content:'';position:absolute;top:-8px;left:50%;width:58px;height:18px;transform:translateX(-50%) rotate(-3deg);background:rgba(232,220,190,.85);box-shadow:0 1px 2px rgba(0,0,0,.08);}
.cb19.cb19 .tape-lb{font-family:var(--cb-hand,'Caveat',cursive);font-size:18px;line-height:1.15;color:var(--cb-ink);text-align:center;}
.cb19.cb19 .qr-clear{flex-shrink:0;text-align:right;font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:.12em;text-transform:uppercase;line-height:1.7;color:var(--cb-mid);background:none;border:none;padding:0;cursor:pointer;}
.cb19.cb19 .qr-clear u{text-underline-offset:2px;}
.cb19.cb19 .qr-clear:hover{color:var(--cb-ink);border-color:var(--cb-ink);}
.cb19.cb19 .r-btn-send{flex-wrap:wrap;}
.cb19.cb19 .r-send-note{display:block;width:100%;margin-top:3px;font-family:'Barlow',sans-serif;font-style:normal;font-size:10.5px;color:rgba(255,255,255,.7);letter-spacing:.02em;}
.cb19.cb19 .chips-wrap{display:none!important;}
.cb19.cb19 .lic{width:14px;height:13px;vertical-align:-2px;display:inline-block;}
.cb19.cb19 .pt-act .lic{width:15px;height:14px;}
.cb19.cb19 .pt-act.on .lic path{fill:var(--cb-red);stroke:var(--cb-red);}
.cb19.cb19 .ptile-badge .lic,.cb19.cb19 .spin-badge .lic{width:12px;height:11px;}
.cb19.cb19 .qr-bar{flex-shrink:0;min-height:54px;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--cb-b);background:var(--cb-cream);}
.cb19.cb19 .qr-live{display:flex;align-items:center;gap:6px;}
.cb19.cb19 .qr-dot{width:7px;height:7px;border-radius:50%;background:var(--cb-red);animation:cb19-pulse 2s infinite;}
@keyframes cb19-pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}
.cb19.cb19 .qr-live-txt{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:0.18em;color:var(--cb-red);}
.cb19.cb19 .qr-count{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:0.1em;color:var(--cb-light);margin-left:8px;}
.cb19.cb19 .qr-head{min-width:0;flex:1;}
.cb19.cb19 .qr-foot{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 16px;border-top:1px solid var(--cb-b);background:var(--cb-cream);}
.cb19.cb19 .qr-foot .qr-est{display:flex;align-items:baseline;gap:8px;}
.cb19.cb19 .qr-foot .qr-est-label{display:inline;}
.cb19.cb19 .qr-foot .qr-est-num{display:inline;font-size:20px;}
.cb19.cb19 .qr-foot .qr-est-range{display:none;}
.cb19.cb19 .qr-title{font-family:'Bowlby One',Impact,'Arial Black',sans-serif;font-size:20px;line-height:1.05;color:var(--cb-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:color .2s;}
@media(max-width:860px){.cb19.cb19 .qr-title{font-size:16px;}.cb19.cb19 .qr-foot{padding:4px 14px;}.cb19.cb19 .qr-foot .qr-est-num{font-size:17px;}}
.cb19.cb19 .qr-est{text-align:right;flex-shrink:0;}
.cb19.cb19 .qr-est-label{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:0.18em;color:var(--cb-light);text-transform:uppercase;display:block;}
.cb19.cb19 .qr-est-num{font-family:'DM Serif Display',serif;font-size:26px;letter-spacing:-0.02em;color:var(--cb-ink);line-height:1.1;font-style:italic;display:block;}
.cb19.cb19 .qr-est-range{font-family:'DM Serif Display',serif;font-style:italic;font-size:12px;color:var(--cb-mid);display:block;line-height:1;}
.cb19.cb19 .qr-x{font-family:'IBM Plex Mono',monospace;font-size:12px;border:1px solid var(--cb-bm);background:var(--cb-w);border-radius:20px;width:30px;height:30px;cursor:pointer;color:var(--cb-mid);flex-shrink:0;margin-left:6px;transition:all .14s;}
.cb19.cb19 .qr-x:hover{color:var(--cb-ink);border-color:var(--cb-ink);}
.cb19.cb19 .qr-stream{flex:1;overflow-y:auto;position:relative;padding:14px 14px 20px;background:
  repeating-linear-gradient(0deg,transparent,transparent 26px,rgba(17,17,16,0.025) 26px,rgba(17,17,16,0.025) 27px),#F7F5F2;}
.cb19.cb19 .qr-stream::-webkit-scrollbar{width:2px;}
.cb19.cb19 .qr-stream::-webkit-scrollbar-thumb{background:var(--cb-ghost);}
.cb19.cb19 .qr-empty{text-align:center;padding:30px 10px;}
.cb19.cb19 .qr-empty-head{font-family:'Bowlby One',Impact,'Arial Black',sans-serif;font-size:22px;line-height:1.05;color:var(--cb-ink);max-width:300px;margin:0 auto 14px;letter-spacing:.005em;}
.cb19.cb19 .qr-empty-circle{width:42px;height:42px;border:1.5px dashed var(--cb-ghost);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-family:'DM Serif Display',serif;font-size:22px;color:var(--cb-ghost);}
.cb19.cb19 .qr-empty-main{font-family:'DM Serif Display',serif;font-size:16px;letter-spacing:0.04em;color:var(--cb-light);margin-bottom:6px;line-height:1.3;}
.cb19.cb19 .qr-empty-sub{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:0.12em;color:var(--cb-ghost);line-height:1.6;}
.cb19.cb19 .vb{position:relative;width:100%;}
.cb19.cb19 .pin{position:absolute;width:42%;background:var(--cb-w);padding:16px 8px 12px;box-shadow:1px 5px 14px rgba(0,0,0,0.18);transform:rotate(var(--r,0deg));z-index:1;text-align:center;border-radius:2px;}
.cb19.cb19 .pin::before{content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:9px;height:9px;background:var(--cb-red);border-radius:50%;box-shadow:0 2px 3px rgba(0,0,0,0.3);z-index:2;}
.cb19.cb19 .pin-ic{display:flex;justify-content:center;margin-bottom:9px;color:var(--cb-ink);}
.cb19.cb19 .pin-ic svg{height:30px;width:auto;}
.cb19.cb19 .pin-lb{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:0.18em;color:var(--cb-mid);text-transform:uppercase;line-height:1.7;}
.cb19.cb19 .pin.bub{background:none;box-shadow:none;padding:7px 0 0;width:auto;max-width:48%;border-radius:0;filter:drop-shadow(1px 3px 4px rgba(0,0,0,0.25));}
.cb19.cb19 .pin-k{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:0.16em;color:var(--cb-mid);text-transform:uppercase;background:var(--cb-w);padding:2px 8px;border-radius:9px;margin-bottom:1px;}
.cb19.cb19 .pin-v{font-family:'DM Serif Display',serif;font-size:19px;color:var(--cb-ink);line-height:1.1;font-style:italic;text-shadow:-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff,-3px 0 0 #fff,3px 0 0 #fff,0 -3px 0 #fff,0 3px 0 #fff;}
.cb19.cb19 .env{position:absolute;width:150px;z-index:5;transform:rotate(var(--r,0deg));filter:drop-shadow(1px 5px 10px rgba(0,0,0,0.18));}
.cb19.cb19 .env::before{content:'';position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:9px;height:9px;background:var(--cb-red);border-radius:50%;box-shadow:0 2px 3px rgba(0,0,0,0.3);z-index:6;}
.cb19.cb19 .env svg{width:100%;display:block;}
.cb19.cb19 .env-cap{font-family:'DM Serif Display',serif;font-style:italic;font-size:13px;color:var(--cb-ink);text-align:center;margin-top:1px;transform:rotate(-1.5deg);}
.cb19.cb19 .env.seal svg{animation:cb19-envpop .55s cubic-bezier(.3,1.4,.5,1);}
@keyframes cb19-envpop{0%{transform:scale(1.14) rotate(-4deg);}60%{transform:scale(.96);}100%{transform:scale(1);}}
.cb19.cb19 .spin{position:absolute;width:46%;transform:rotate(var(--r,0deg));z-index:2;}
.cb19.cb19 .spin::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:9px;height:9px;background:var(--cb-red);border-radius:50%;box-shadow:0 2px 3px rgba(0,0,0,0.3);z-index:3;}
.cb19.cb19 .spin img{width:100%;display:block;filter:drop-shadow(1px 4px 7px rgba(0,0,0,0.25));}
.cb19.cb19 .spin.raw img{border-radius:12px;border:5px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,0.18);filter:none;}
.cb19.cb19 .spin-badge{position:absolute;top:2px;right:0;z-index:3;font-size:12px;background:rgba(255,255,255,0.95);border-radius:20px;padding:3px 7px;box-shadow:0 1px 4px rgba(0,0,0,0.2);font-family:'Barlow',sans-serif;font-weight:700;color:var(--cb-ink);}
.cb19.cb19 .spin-note{font-family:'DM Serif Display',serif;font-style:italic;font-size:12px;color:var(--cb-mid);text-align:center;line-height:1.1;margin-top:2px;transform:rotate(-1.2deg);}
.cb19.cb19 .spin.edit{width:56%;z-index:3;}
.cb19.cb19 .spin-editlabel{font-family:'DM Serif Display',serif;font-style:italic;font-size:13px;color:var(--cb-ink);text-align:center;line-height:1.1;margin-top:3px;transform:rotate(1deg);}
.cb19.cb19 .bx{position:absolute;top:-6px;left:-6px;z-index:8;width:22px;height:22px;border-radius:50%;border:1px solid var(--cb-bm);background:#fff;color:var(--cb-mid);font-size:10px;line-height:1;padding:0;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:center;}
.cb19.cb19 .bx:hover{color:var(--cb-red);border-color:var(--cb-red);}
.cb19.cb19 .spin .bx{transform:rotate(calc(var(--r,0deg) * -1));}
.cb19.cb19 .fold{position:relative;width:min(250px,74%);height:200px;margin:4px auto 0;z-index:5;transform:rotate(-1.5deg);}
.cb19.cb19 .fold.seal{animation:cb19-envpop .55s cubic-bezier(.3,1.4,.5,1);}
.cb19.cb19 .fold-back{position:absolute;left:0;right:0;top:34px;bottom:30px;background:#E2C48F;border-radius:4px 10px 6px 6px;box-shadow:1px 5px 14px rgba(0,0,0,0.18);}
.cb19.cb19 .fold-back::before{content:'';position:absolute;left:10px;top:-14px;width:38%;height:16px;background:#E2C48F;border-radius:6px 10px 0 0;}
.cb19.cb19 .fold-back::after{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:9px;height:9px;background:var(--cb-red);border-radius:50%;box-shadow:0 2px 3px rgba(0,0,0,0.3);}
.cb19.cb19 .fold-front{position:absolute;left:-3px;right:-3px;top:88px;bottom:30px;z-index:4;background:linear-gradient(#EED6A6,#E6C995);border-radius:3px 3px 6px 6px;box-shadow:0 -2px 6px rgba(0,0,0,0.10);transform:skewX(-2deg);display:flex;align-items:flex-end;justify-content:flex-start;padding:0 0 8px 26%;}
.cb19.cb19 .fold-cap{font-family:'DM Serif Display',serif;font-style:italic;font-size:14px;color:#5A4524;transform:skewX(2deg) rotate(-1.5deg);}
.cb19.cb19 .fold-note{position:absolute;right:-12px;bottom:-4px;z-index:7;width:112px;background:var(--cb-yellow);padding:7px 9px;font-family:'DM Serif Display',serif;font-style:italic;font-size:12px;line-height:1.05;color:var(--cb-ink);box-shadow:1px 3px 8px rgba(0,0,0,0.14);transform:rotate(4deg);}
.cb19.cb19 .fthumb.spin{width:30%;max-width:78px;}
.cb19.cb19 .fthumb.spin::before{display:none;}
.cb19.cb19 .fthumb.inn{z-index:3;}
.cb19.cb19 .fthumb.out{z-index:6;}
.cb19.cb19 .fthumb.raw img{border-width:3px;border-radius:8px;}
.cb19.cb19 .fthumb .bx{width:20px;height:20px;top:-7px;left:-7px;}
.cb19.cb19 .badge-pin{position:absolute;width:88px;height:88px;border-radius:50%;background:var(--cb-yellow);border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,0.2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transform:rotate(var(--r,0deg));z-index:4;text-align:center;}
.cb19.cb19 .badge-pin b{font-size:18px;line-height:1;}
.cb19.cb19 .badge-pin span{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--cb-ink);line-height:1.35;padding:0 8px;}
.cb19.cb19 .qr-send{flex-shrink:0;padding:10px 14px 12px;border-top:1px solid var(--cb-b);background:var(--cb-cream);display:none;}
.cb19.cb19 .qr-send.show{display:block;}
.cb19.cb19 .qr-send-btn{width:100%;font-family:'DM Serif Display',serif;font-size:14px;letter-spacing:0.02em;font-style:italic;background:var(--cb-ink);color:var(--cb-w);border:none;padding:13px 18px;cursor:pointer;transition:opacity .15s;display:flex;align-items:center;justify-content:center;gap:8px;}
.cb19.cb19 .qr-send-btn:hover{opacity:.8;}
.cb19.cb19 .pip{width:6px;height:6px;background:var(--cb-red);border-radius:50%;flex-shrink:0;display:inline-block;}
.cb19.cb19 .ql-bar{height:48px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--cb-b);background:var(--cb-w);}
.cb19.cb19 .ql-logo{font-family:'DM Serif Display',serif;font-size:15px;letter-spacing:0.02em;color:var(--cb-ink);font-style:italic;}
.cb19.cb19 .ql-step{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:0.14em;color:var(--cb-light);text-transform:uppercase;}
.cb19.cb19 .chips-wrap{position:sticky;top:0;z-index:40;background:rgba(249,248,246,0.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--cb-b);padding:8px 14px;display:none;align-items:center;gap:8px;}
.cb19.cb19 .chips-wrap.show{display:flex;}
.cb19.cb19 .chips-label{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:0.2em;color:var(--cb-light);text-transform:uppercase;flex-shrink:0;}
.cb19.cb19 .chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;}
.cb19.cb19 .chips::-webkit-scrollbar{display:none;}
.cb19.cb19 .chipp{flex-shrink:0;display:flex;align-items:baseline;gap:5px;background:var(--cb-w);border:1px solid var(--cb-bm);padding:4px 9px;cursor:pointer;transition:all .14s;border-radius:2px;}
.cb19.cb19 .chipp:hover{border-color:var(--cb-ink);}
.cb19.cb19 .chipp-k{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:0.12em;color:var(--cb-light);text-transform:uppercase;}
.cb19.cb19 .chipp-v{font-family:'DM Serif Display',serif;font-size:12px;color:var(--cb-ink);font-style:italic;white-space:nowrap;}
.cb19.cb19 .chipp.hearts{background:var(--cb-yellow);border-color:var(--cb-yellow2);}
.cb19.cb19 .feed{padding:18px 16px 30px;display:flex;flex-direction:column;gap:16px;align-items:center;}
.cb19.cb19 .fcard{width:100%;max-width:580px;background:var(--cb-w);border:1px solid var(--cb-b);box-shadow:0 2px 10px rgba(0,0,0,0.04);padding:24px 22px 22px;opacity:0;transform:translateY(14px);transition:opacity .35s ease,transform .35s ease;scroll-margin-top:64px;border-radius:2px;}
.cb19.cb19 .fcard.in{opacity:1;transform:translateY(0);}
.cb19.cb19 .fq-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:0.22em;color:var(--cb-light);text-transform:uppercase;margin-bottom:8px;}
.cb19.cb19 .fq-title{font-family:'DM Serif Display',serif;font-size:clamp(24px,4.5vw,32px);letter-spacing:-0.01em;color:var(--cb-ink);line-height:1.05;margin-bottom:6px;}
.cb19.cb19 .fq-hint{font-size:12.5px;color:var(--cb-light);font-style:italic;line-height:1.5;margin-bottom:16px;}
.cb19.cb19 .optgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.cb19.cb19 .opt{padding:16px 14px;border:1px solid var(--cb-b);background:var(--cb-cream);cursor:pointer;transition:all .16s;border-radius:2px;text-align:left;}
.cb19.cb19 .opt:hover{background:var(--cb-blue);border-color:var(--cb-blue2);}
.cb19.cb19 .opt.on{background:var(--cb-blue);border-color:var(--cb-blue2);}
.cb19.cb19 .opt-name{font-family:'DM Serif Display',serif;font-size:17px;color:var(--cb-ink);line-height:1.1;margin-bottom:3px;}
.cb19.cb19 .opt-sub{font-size:11px;color:var(--cb-light);line-height:1.4;}
.cb19.cb19 .pc-ic{height:36px;color:var(--cb-ink);margin-bottom:9px;display:flex;}
.cb19.cb19 .pc-ic svg{height:36px;width:auto;}
.cb19.cb19 .htrow{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;padding-top:6px;}
.cb19.cb19 .htitem{display:flex;flex-direction:column;align-items:center;cursor:pointer;flex:1;min-width:92px;max-width:132px;transition:transform .22s;}
.cb19.cb19 .htitem:nth-child(1){transform:rotate(-1.5deg);}
.cb19.cb19 .htitem:nth-child(2){transform:rotate(.8deg);}
.cb19.cb19 .htitem:nth-child(3){transform:rotate(-2deg);}
.cb19.cb19 .htitem:hover{transform:translateY(-8px) rotate(0deg);}
.cb19.cb19 .htitem.on{transform:translateY(-5px) rotate(0deg);}
.cb19.cb19 .htitem.on .htbody{background:var(--cb-yellow);border-color:var(--cb-yellow2);}
.cb19.cb19 .htcord{width:48px;height:40px;flex-shrink:0;margin-bottom:-2px;}
.cb19.cb19 .htbody{width:100%;background:var(--cb-w);border:1px solid var(--cb-bm);border-radius:3px;padding:22px 10px 13px;position:relative;box-shadow:0 2px 8px rgba(0,0,0,0.07);text-align:center;transition:all .2s;}
.cb19.cb19 .htbody::before{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:var(--cb-cream2);border:1px solid rgba(17,17,16,0.15);}
.cb19.cb19 .htic{display:flex;justify-content:center;color:var(--cb-ink);height:36px;margin-bottom:8px;align-items:flex-end;}
.cb19.cb19 .htic svg{max-height:36px;width:auto;}
.cb19.cb19 .htname{font-family:'DM Serif Display',serif;font-size:15px;color:var(--cb-ink);line-height:1.1;}
.cb19.cb19 .htsub{font-family:'IBM Plex Mono',monospace;font-size:7.5px;color:var(--cb-light);letter-spacing:.06em;margin-top:4px;line-height:1.5;}
.cb19.cb19 .htitem.urgent .htname,.cb19.cb19 .htitem.urgent .htic{color:var(--cb-red);}
.cb19.cb19 .stkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 10px;}
.cb19.cb19 .stk{display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform .2s;}
.cb19.cb19 .stk:nth-child(odd){transform:rotate(-2deg);}
.cb19.cb19 .stk:nth-child(even){transform:rotate(1.6deg);}
.cb19.cb19 .stk:hover{transform:scale(1.08) rotate(0deg);}
.cb19.cb19 .stk.on{transform:scale(1.05) rotate(0deg);}
.cb19.cb19 .stk.on .stk-name{background:var(--cb-ink);color:var(--cb-w);}
.cb19.cb19 .stk-ic{color:var(--cb-ink);}
.cb19.cb19 .stk-ic svg{height:46px;width:auto;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(1px 3px 3px rgba(0,0,0,0.2));}
.cb19.cb19 .stk-name{font-family:'DM Serif Display',serif;font-size:12.5px;font-style:italic;color:var(--cb-ink);margin-top:5px;background:var(--cb-w);padding:1px 9px;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,0.12);transition:all .15s;}
.cb19.cb19 .stk-sub{font-family:'IBM Plex Mono',monospace;font-size:6.5px;color:var(--cb-mid);letter-spacing:.06em;margin-top:3px;}
.cb19.cb19 .pinboard{background:repeating-linear-gradient(0deg,transparent,transparent 26px,rgba(17,17,16,0.025) 26px,rgba(17,17,16,0.025) 27px),#F7F5F2;padding:20px 14px 18px;border-radius:4px;margin:0 -4px;}
.cb19.cb19 .opt.pinopt{position:relative;box-shadow:1px 5px 12px rgba(0,0,0,0.15);border:none;background:var(--cb-w);border-radius:2px;padding:20px 12px 14px;text-align:center;transition:all .18s;}
.cb19.cb19 .opt.pinopt::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:9px;height:9px;background:var(--cb-red);border-radius:50%;box-shadow:0 2px 3px rgba(0,0,0,0.3);}
.cb19.cb19 .opt.pinopt:nth-child(odd){transform:rotate(-1.4deg);}
.cb19.cb19 .opt.pinopt:nth-child(even){transform:rotate(1.2deg);}
.cb19.cb19 .opt.pinopt:hover{transform:rotate(0deg) translateY(-4px);background:var(--cb-blue);}
.cb19.cb19 .opt.pinopt.on{transform:rotate(0deg);background:var(--cb-blue);}
.cb19.cb19 .opt.pinopt .pc-ic{justify-content:center;}
.cb19.cb19 .pin-sk{display:flex;justify-content:center;color:var(--cb-ink);margin-bottom:3px;}
.cb19.cb19 .pin-sk{position:relative;}
.cb19.cb19 .mm-twin{position:absolute;right:-10px;bottom:-8px;transform:rotate(3deg);pointer-events:none;}
.cb19.cb19 .pin-sk .mm-twin svg{height:32px;}
.cb19.cb19 .pin-sk svg{height:48px;width:auto;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff);}
.cb19.cb19 .opt.yellow:hover,.cb19.cb19 .opt.yellow.on{background:var(--cb-yellow);border-color:var(--cb-yellow2);}
.cb19.cb19 .pillrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;padding-top:10px;border-top:1px solid var(--cb-b);}
.cb19.cb19 .pillw{font-family:'DM Serif Display',serif;font-size:13px;letter-spacing:0.05em;padding:6px 13px;border:1px solid var(--cb-bm);background:var(--cb-w);cursor:pointer;transition:all .14s;color:var(--cb-mid);}
.cb19.cb19 .pillw:hover{border-color:var(--cb-ink);color:var(--cb-ink);}
.cb19.cb19 .pillw.on{background:var(--cb-ink);border-color:var(--cb-ink);color:var(--cb-w);}
.cb19.cb19 .subq{display:none;}
.cb19.cb19 .subq.show{display:block;}
.cb19.cb19 .tl-std{margin-top:16px;}
.cb19.cb19 .tl-note{background:var(--cb-yellow);padding:9px 12px;font-size:12.5px;line-height:1.45;color:var(--cb-ink);transform:rotate(-.6deg);box-shadow:1px 2px 6px rgba(0,0,0,0.08);}
.cb19.cb19 .tl-check{display:flex;align-items:center;gap:10px;margin-top:12px;cursor:pointer;font-family:'DM Serif Display',serif;font-size:15px;color:var(--cb-ink);}
.cb19.cb19 .tl-check input{width:20px;height:20px;accent-color:var(--cb-ink);flex-shrink:0;}
.cb19.cb19 .fnote{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:0.08em;color:var(--cb-light);margin-top:8px;}
.cb19.cb19 .tl-icon{height:30px;margin-bottom:9px;color:var(--cb-ink);}
.cb19.cb19 .tl-icon svg{height:30px;width:auto;display:block;}
.cb19.cb19 .tl-icon.red{color:var(--cb-red);}
.cb19.cb19 .more-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px;}
.cb19.cb19 .more-tile{display:flex;gap:10px;align-items:center;background:var(--cb-cream);border:1px solid var(--cb-b);border-radius:12px;overflow:hidden;cursor:pointer;transition:all .15s;padding-right:10px;}
.cb19.cb19 .more-tile:hover{background:var(--cb-blue);border-color:var(--cb-blue2);}
.cb19.cb19 .more-tile img{width:62px;height:62px;object-fit:cover;flex-shrink:0;}
.cb19.cb19 .more-tile-cap{font-family:'DM Serif Display',serif;font-size:12.5px;font-style:italic;color:var(--cb-ink);line-height:1.2;}
.cb19.cb19 .more-tile-cta{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:0.1em;color:var(--cb-mid);text-transform:uppercase;margin-top:3px;}
.cb19.cb19 .intro-title{font-family:'DM Serif Display',serif;font-size:clamp(34px,6.5vw,46px);line-height:1.02;color:var(--cb-ink);margin-bottom:10px;}
.cb19.cb19 .intro-title em{font-style:italic;}
.cb19.cb19 .intro-sub{font-size:14px;color:var(--cb-mid);line-height:1.65;margin-bottom:6px;}
.cb19.cb19 .calcwrap{display:flex;justify-content:center;margin:12px 0 0;}
.cb19.cb19 .calc3d{width:min(235px,72%);background:#F7EFC9;border-radius:18px;padding:13px 13px 15px;box-shadow:0 14px 28px rgba(0,0,0,0.16),inset 0 -4px 8px rgba(0,0,0,0.06),inset 0 2px 3px #fff;cursor:pointer;animation:cb19-calcfloat 3.6s ease-in-out infinite;}
@keyframes cb19-calcfloat{0%,100%{transform:rotate(-2.5deg) translateY(0);}50%{transform:rotate(-1deg) translateY(-7px);}}
.cb19.cb19 .calc-screen{background:#AEB39B;border-radius:6px;padding:10px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;line-height:1.5;color:#2E2C26;box-shadow:inset 0 2px 5px rgba(0,0,0,0.25);margin-bottom:12px;}
.cb19.cb19 .calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:center;}
.cb19.cb19 .ckey{aspect-ratio:1;border-radius:50%;background:#FBF4D6;box-shadow:0 3px 0 #D9CFA3,0 4px 6px rgba(0,0,0,0.12),inset 0 2px 2px #fff;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:13px;color:#B5A878;user-select:none;}
.cb19.cb19 .ckey.wide{grid-column:span 3;aspect-ratio:auto;height:40px;border-radius:22px;font-family:'Barlow',sans-serif;font-size:14px;color:#A89A69;}
.cb19.cb19 .calc3d:active .ckey.wide{transform:translateY(2px);box-shadow:0 1px 0 #D9CFA3,0 2px 3px rgba(0,0,0,0.12);}
.cb19.cb19 .intro-start{display:flex;flex-direction:column;align-items:center;cursor:pointer;margin-top:12px;color:var(--cb-ink);}
.cb19.cb19 .intro-hello{font-family:'DM Serif Display',serif;font-style:italic;font-size:18px;color:var(--cb-ink);transform:rotate(-1.5deg);margin:-2px 0 10px;}
.cb19.cb19 .intro-start{padding:6px 0 4px;}
.cb19.cb19 .intro-chev{width:44px;height:24px;animation:cb19-chevnudge 1.6s ease-in-out infinite;}
@keyframes cb19-chevnudge{0%,100%{transform:translateY(0);opacity:.75;}50%{transform:translateY(8px);opacity:1;}}
@media (prefers-reduced-motion:reduce){.cb19.cb19 .intro-chev{animation:none;}}
.cb19.cb19 .intro-startnote{font-family:'DM Serif Display',serif;font-style:italic;font-size:15px;color:var(--cb-mid);margin-top:4px;}
.cb19.cb19 .fbtn{font-family:'DM Serif Display',serif;font-size:14px;letter-spacing:0.02em;font-style:italic;background:var(--cb-ink);color:var(--cb-w);border:none;padding:13px 24px;cursor:pointer;transition:opacity .15s;display:inline-flex;align-items:center;gap:8px;width:100%;justify-content:center;margin-top:16px;}
.cb19.cb19 .fbtn:hover{opacity:.78;}
.cb19.cb19 .fbtn[disabled]{opacity:.35;cursor:default;}
.cb19.cb19 .field-label{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:0.16em;color:var(--cb-light);text-transform:uppercase;margin-bottom:6px;display:block;}
.cb19.cb19 .field-input{width:100%;border:none;border-bottom:1.5px solid var(--cb-bm);background:transparent;outline:none;font-family:'Barlow',sans-serif;font-size:16px;color:var(--cb-ink);padding:6px 0;transition:border-color .15s;}
.cb19.cb19 .field-input:focus{border-bottom-color:var(--cb-ink);}
.cb19.cb19 .field-input::placeholder{color:var(--cb-ghost);font-style:italic;font-size:14px;}
.cb19.cb19 .field-textarea{width:100%;border:1px solid var(--cb-bm);background:var(--cb-cream);outline:none;resize:none;font-family:'Barlow',sans-serif;font-size:14px;color:var(--cb-ink);padding:12px;line-height:1.6;min-height:76px;transition:border-color .15s;border-radius:2px;}
.cb19.cb19 .field-textarea:focus{border-color:var(--cb-ink);}
.cb19.cb19 .field-textarea::placeholder{color:var(--cb-ghost);font-style:italic;}
.cb19.cb19 .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.cb19.cb19 .fcard.done{opacity:0.92;}
.cb19.cb19 .fcard.done .fq-title{font-size:20px;}
.cb19.cb19 .pg-legend{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.cb19.cb19 .pg-leg{display:flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:0.08em;color:var(--cb-mid);}
.cb19.cb19 .pg-leg b{font-size:13px;}
.cb19.cb19 .pgrid{column-count:2;column-gap:12px;}
@media(min-width:861px){.cb19.cb19 .pgrid{column-count:2;}}
.cb19.cb19 .ptile{break-inside:avoid;margin-bottom:12px;position:relative;background:var(--cb-w);border:none;border-radius:16px;overflow:hidden;cursor:pointer;transition:box-shadow .22s,transform .22s;box-shadow:0 3px 14px rgba(17,17,16,0.09);}
.cb19.cb19 .ptile:hover{box-shadow:0 10px 26px rgba(17,17,16,0.16);transform:translateY(-3px);}
.cb19.cb19 .ptile img{width:100%;display:block;}
.cb19.cb19 .ptile-caprow{display:flex;align-items:center;gap:4px;padding:7px 10px 0;}
.cb19.cb19 .ptile-cap{font-family:'DM Serif Display',serif;font-size:11.5px;font-style:italic;color:var(--cb-mid);line-height:1.25;flex:1;}
.cb19.cb19 .pt-exp{flex-shrink:0;width:22px;height:22px;border:none;background:var(--cb-cream);border-radius:50%;cursor:pointer;color:var(--cb-mid);font-size:11px;line-height:1;transition:transform .2s,color .15s;}
.cb19.cb19 .pt-exp:hover{color:var(--cb-ink);}
.cb19.cb19 .pt-exp.open{transform:rotate(180deg);}
.cb19.cb19 .ptile-desc{display:none;font-size:11px;color:var(--cb-mid);line-height:1.55;padding:5px 11px 2px;}
.cb19.cb19 .ptile-desc.show{display:block;}
.cb19.cb19 .ptile-actions{display:flex;gap:6px;padding:5px 8px 9px;}
.cb19.cb19 .pt-act{flex:0 0 auto;font-size:14px;line-height:1;background:var(--cb-cream);border:1px solid var(--cb-b);border-radius:20px;padding:5px 10px;cursor:pointer;transition:all .14s;filter:grayscale(1) opacity(.55);}
.cb19.cb19 .pt-act:hover{filter:none;border-color:var(--cb-bm);}
.cb19.cb19 .pt-act.on{filter:none;background:var(--cb-yellow);border-color:var(--cb-yellow2);}
.cb19.cb19 .pt-act.chk{filter:none;color:var(--cb-light);font-weight:700;font-family:'Barlow',sans-serif;}
.cb19.cb19 .pt-act.chk:hover{color:var(--cb-ink);}
.cb19.cb19 .pt-act.chk.on{background:var(--cb-blue);border-color:var(--cb-blue2);color:var(--cb-ink);}
.cb19.cb19 .ptile-img{position:relative;}
.cb19.cb19 .ptile-price{position:absolute;left:8px;bottom:8px;background:rgba(255,255,255,0.95);border-radius:20px;padding:3px 9px;font-family:'DM Serif Display',serif;font-style:italic;font-size:12px;color:var(--cb-ink);box-shadow:0 1px 4px rgba(0,0,0,0.18);}
.cb19.cb19 .ptile-x{position:absolute;top:7px;left:7px;z-index:4;width:28px;height:28px;border-radius:50%;border:none;background:rgba(255,255,255,0.95);color:var(--cb-mid);font-size:12px;line-height:1;padding:0;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,0.2);display:none;align-items:center;justify-content:center;}
.cb19.cb19 .ptile-x.show{display:flex;}
.cb19.cb19 .ptile-x:hover{color:var(--cb-red);}
.cb19.cb19 .ptile-note-dot{left:40px!important;}
.cb19.cb19 .psticky{background:var(--cb-yellow);padding:12px 14px 13px;margin:0 2px 16px;box-shadow:2px 3px 9px rgba(0,0,0,0.1);transform:rotate(-1deg);position:relative;}
.cb19.cb19 .psticky::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:9px;height:9px;background:var(--cb-red);border-radius:50%;box-shadow:0 2px 3px rgba(0,0,0,0.3);}
.cb19.cb19 .psticky-h{font-family:'DM Serif Display',serif;font-style:italic;font-size:16px;color:var(--cb-ink);line-height:1;}
.cb19.cb19 .psticky-s{font-size:12px;color:var(--cb-mid);line-height:1.45;margin:4px 0 8px;}
.cb19.cb19 .psticky-rows{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--cb-ink);}
.cb19.cb19 .psticky-rows b{font-family:'DM Serif Display',serif;font-weight:400;font-style:italic;font-size:13px;}
.cb19.cb19 .editwrap{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr);gap:16px;align-items:start;}
.cb19.cb19 .edit-photo{width:100%;border-radius:12px;border:5px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,0.14);transform:rotate(-2deg);}
@media(max-width:480px){.cb19.cb19 .editwrap{grid-template-columns:minmax(0,1fr);}.cb19.cb19 .edit-photo{max-width:170px;}}
.cb19.cb19 .more-tile{position:relative;}
.cb19.cb19 .more-tile-txt{padding-right:24px;min-width:0;}
.cb19.cb19 .more-tile-price{font-family:'DM Serif Display',serif;font-style:italic;font-size:12px;color:var(--cb-ink);margin-top:3px;}
.cb19.cb19 .mx{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;border:1px solid var(--cb-bm);background:#fff;color:var(--cb-mid);font-size:10px;line-height:1;padding:0;cursor:pointer;}
.cb19.cb19 .mx:hover{color:var(--cb-red);border-color:var(--cb-red);}
.cb19.cb19 .ptile-badge{position:absolute;top:7px;right:7px;background:rgba(255,255,255,0.94);border-radius:20px;padding:3px 8px;font-size:11px;box-shadow:0 1px 4px rgba(0,0,0,0.15);display:none;}
.cb19.cb19 .ptile-badge.show{display:block;}
.cb19.cb19 .ptile-note-dot{position:absolute;top:7px;left:7px;background:var(--cb-yellow);border-radius:20px;padding:3px 7px;font-size:9px;box-shadow:0 1px 4px rgba(0,0,0,0.15);display:none;font-family:'IBM Plex Mono',monospace;letter-spacing:0.04em;}
.cb19.cb19 .ptile-note-dot.show{display:block;}
.cb19.cb19 .ptile-add{break-inside:avoid;margin-bottom:10px;border:1.5px dashed var(--cb-ghost);border-radius:2px;min-height:110px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;color:var(--cb-light);background:var(--cb-cream);transition:all .15s;}
.cb19.cb19 .ptile-add:hover{border-color:var(--cb-ink);color:var(--cb-ink);}
.cb19.cb19 .ptile-add-plus{font-family:'DM Serif Display',serif;font-size:26px;line-height:1;}
.cb19.cb19 .ptile-add-txt{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:0.14em;text-transform:uppercase;}
.cb19.cb19 .overlay{position:fixed;inset:0;background:rgba(17,17,16,0.72);z-index:10001;display:none;align-items:center;justify-content:center;padding:16px;}
.cb19.cb19 .overlay.show{display:flex;}
.cb19.cb19 .pv{background:var(--cb-w);width:420px;max-width:96vw;max-height:92vh;overflow-y:auto;animation:cb19-paper-in .4s cubic-bezier(.4,0,.2,1) forwards;position:relative;}
@keyframes cb19-paper-in{from{transform:translateY(-30px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.cb19.cb19 .pv-x{position:absolute;top:10px;right:12px;z-index:3;background:rgba(255,255,255,0.9);border:none;border-radius:20px;width:28px;height:28px;cursor:pointer;font-size:13px;color:var(--cb-mid);box-shadow:0 1px 4px rgba(0,0,0,0.2);}
.cb19.cb19 .pv img{width:100%;max-height:46vh;object-fit:contain;display:block;background:var(--cb-cream2);}
.cb19.cb19 .pv-body{padding:16px 18px 20px;}
.cb19.cb19 .pv-cap{font-family:'DM Serif Display',serif;font-size:17px;font-style:italic;color:var(--cb-ink);margin-bottom:12px;line-height:1.2;}
.cb19.cb19 .pv-desc{font-size:12px;color:var(--cb-mid);line-height:1.6;margin:-6px 0 12px;display:none;}
.cb19.cb19 .pv-levels{display:flex;gap:6px;margin-bottom:12px;}
.cb19.cb19 .pv-level{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:10px 5px;border:1px solid var(--cb-b);background:var(--cb-cream);cursor:pointer;transition:all .14s;font-family:'DM Serif Display',serif;font-size:12px;color:var(--cb-ink);white-space:nowrap;}
.cb19.cb19 .pv-level span{font-size:16px;filter:grayscale(1) opacity(.5);}
.cb19.cb19 .pv-level:hover{border-color:var(--cb-bm);}
.cb19.cb19 .pv-level.on{background:var(--cb-yellow);border-color:var(--cb-yellow2);}
.cb19.cb19 .pv-level.on span{filter:none;}
.cb19.cb19 .pv-save{font-family:'DM Serif Display',serif;font-size:14px;font-style:italic;background:var(--cb-ink);color:var(--cb-w);border:none;padding:12px 20px;cursor:pointer;width:100%;margin-top:12px;transition:opacity .15s;display:flex;align-items:center;justify-content:center;gap:8px;}
.cb19.cb19 .pv-save:hover{opacity:.8;}
.cb19.cb19 .pv-remove{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:0.12em;color:var(--cb-red);background:none;border:none;cursor:pointer;margin:10px auto 0;display:none;text-transform:uppercase;}
.cb19.cb19 .pv-remove.show{display:block;}
.cb19.cb19 .ap{background:var(--cb-w);width:380px;max-width:96vw;padding:26px 24px;animation:cb19-paper-in .4s ease forwards;}
.cb19.cb19 .ap-title{font-family:'DM Serif Display',serif;font-size:22px;color:var(--cb-ink);margin-bottom:4px;}
.cb19.cb19 .ap-sub{font-size:12px;color:var(--cb-light);font-style:italic;margin-bottom:16px;}
.cb19.cb19 .ap-topics{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 14px;}
.cb19.cb19 .ap-status{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:0.1em;color:var(--cb-mid);margin-top:10px;min-height:14px;}
.cb19.cb19 .receipt-paper{background:var(--cb-w);width:340px;max-width:94vw;max-height:92vh;overflow-y:auto;animation:cb19-paper-in .45s cubic-bezier(.4,0,.2,1) forwards;}
.cb19.cb19 .receipt-printer{height:28px;background:#2A2825;display:flex;align-items:center;justify-content:center;}
.cb19.cb19 .receipt-slot{width:70px;height:3px;background:#1A1614;border-radius:1px;}
.cb19.cb19 .receipt-body{background:var(--cb-w);padding:16px 14px 20px;}
.cb19.cb19 .receipt-hdr{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:0.2em;color:var(--cb-light);text-align:center;margin-bottom:12px;}
.cb19.cb19 .receipt-brand{font-family:'DM Serif Display',serif;font-size:26px;letter-spacing:0.02em;color:var(--cb-ink);text-align:center;line-height:1;margin-bottom:2px;}
.cb19.cb19 .receipt-loc{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:0.12em;color:var(--cb-light);text-align:center;margin-bottom:16px;}
.cb19.cb19 .r-div{border:none;border-top:1px dashed var(--cb-ghost);margin:12px 0;}
.cb19.cb19 .r-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;gap:10px;}
.cb19.cb19 .r-k{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:0.1em;color:var(--cb-light);text-transform:uppercase;flex-shrink:0;}
.cb19.cb19 .r-v{font-family:'DM Serif Display',serif;font-size:14px;letter-spacing:0em;color:var(--cb-ink);text-align:right;line-height:1.25;}
.cb19.cb19 .r-total{margin-top:14px;padding:12px 14px;background:var(--cb-yellow);display:flex;justify-content:space-between;align-items:baseline;}
.cb19.cb19 .r-t-k{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:0.16em;color:var(--cb-mid);}
.cb19.cb19 .r-t-v{font-family:'DM Serif Display',serif;font-size:26px;letter-spacing:0em;color:var(--cb-ink);}
.cb19.cb19 .receipt-actions{display:flex;gap:8px;margin-top:14px;}
.cb19.cb19 .r-btn-back{flex:1;font-family:'DM Serif Display',serif;font-size:13px;font-style:italic;background:none;color:var(--cb-mid);border:1px solid var(--cb-bm);padding:11px 10px;cursor:pointer;transition:background .15s;}
.cb19.cb19 .r-btn-back:hover{background:var(--cb-cream2);}
.cb19.cb19 .r-btn-send{flex:2;font-family:'DM Serif Display',serif;font-size:13px;font-style:italic;background:var(--cb-ink);color:var(--cb-w);border:none;padding:11px 10px;cursor:pointer;transition:opacity .15s;display:flex;align-items:center;justify-content:center;gap:7px;}
.cb19.cb19 .r-btn-send:hover{opacity:.78;}
.cb19.cb19 .contact-modal{background:var(--cb-w);width:360px;max-width:94vw;padding:30px 28px;animation:cb19-paper-in .3s ease forwards;}
.cb19.cb19 .c-title{font-family:'DM Serif Display',serif;font-size:24px;letter-spacing:-0.01em;color:var(--cb-ink);margin-bottom:5px;line-height:1.1;}
.cb19.cb19 .c-sub{font-size:13px;color:var(--cb-light);font-style:italic;margin-bottom:20px;}
.cb19.cb19 .c-methods{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
.cb19.cb19 .c-method{display:flex;align-items:center;gap:12px;padding:12px 15px;border:1px solid var(--cb-b);background:var(--cb-cream);cursor:pointer;transition:all .15s;}
.cb19.cb19 .c-method:hover{background:var(--cb-blue);border-color:var(--cb-blue2);}
.cb19.cb19 .c-method.on{background:var(--cb-blue);border-color:var(--cb-blue2);}
.cb19.cb19 .c-method.on .c-check{background:var(--cb-blue3);border-color:var(--cb-blue3);}
.cb19.cb19 .c-method.on .c-check::after{opacity:1;}
.cb19.cb19 .c-check{width:14px;height:14px;border:1px solid var(--cb-ghost);background:var(--cb-w);flex-shrink:0;position:relative;border-radius:2px;transition:all .13s;}
.cb19.cb19 .c-check::after{content:'';position:absolute;top:1px;left:4px;width:4px;height:7px;border:1.5px solid white;border-top:none;border-left:none;transform:rotate(45deg);opacity:0;transition:opacity .13s;}
.cb19.cb19 .c-name{font-family:'DM Serif Display',serif;font-size:16px;color:var(--cb-ink);}
.cb19.cb19 .c-detail{display:none;padding:8px 0 4px;}
.cb19.cb19 .c-detail.show{display:block;}
.cb19.cb19 .c-error{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:0.12em;color:var(--cb-red);margin-bottom:10px;display:none;}
.cb19.cb19 .c-error.show{display:block;}
.cb19.cb19 .c-sent{text-align:center;padding:14px 0 4px;display:none;}
.cb19.cb19 .c-sent.show{display:block;}
.cb19.cb19 .c-sent-big{font-family:'DM Serif Display',serif;font-size:26px;font-style:italic;color:var(--cb-ink);margin-bottom:8px;}
.cb19.cb19 .c-sent-sub{font-size:13px;color:var(--cb-mid);line-height:1.6;font-style:italic;}
.cb19.cb19.cb19 .htrow{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;padding-top:6px;}
.cb19.cb19.cb19 .htitem{display:flex;flex-direction:column;align-items:center;cursor:pointer;flex:1;min-width:92px;max-width:132px;transition:transform .22s;}
.cb19.cb19.cb19 .htitem:nth-child(1){transform:rotate(-1.5deg);}
.cb19.cb19.cb19 .htitem:nth-child(2){transform:rotate(.8deg);}
.cb19.cb19.cb19 .htitem:nth-child(3){transform:rotate(-2deg);}
.cb19.cb19.cb19 .htitem:hover{transform:translateY(-8px) rotate(0deg);}
.cb19.cb19.cb19 .htitem.on{transform:translateY(-5px) rotate(0deg);}
.cb19.cb19.cb19 .htitem.on .htbody{background:var(--butter);border-color:var(--b3yel2);}
.cb19.cb19.cb19 .htcord{width:48px;height:40px;flex-shrink:0;margin-bottom:-2px;}
.cb19.cb19.cb19 .htbody{width:100%;background:#fff;border:1px solid var(--bm);border-radius:3px;padding:22px 10px 13px;position:relative;box-shadow:0 2px 8px rgba(0,0,0,0.07);text-align:center;transition:all .2s;}
.cb19.cb19.cb19 .htbody::before{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:var(--paper2);border:1px solid rgba(27,27,27,0.15);}
.cb19.cb19.cb19 .htic{display:flex;justify-content:center;color:var(--ink);height:36px;margin-bottom:8px;align-items:flex-end;}
.cb19.cb19.cb19 .htic svg{max-height:36px;width:auto;}
.cb19.cb19.cb19 .htname{font-family:var(--serif);font-size:15px;color:var(--ink);line-height:1.1;}
.cb19.cb19.cb19 .htsub{font-family:var(--mono);font-size:7.5px;color:var(--mute);letter-spacing:.06em;margin-top:4px;line-height:1.5;}
.cb19.cb19.cb19 .htitem.urgent .htname,.cb19.cb19.cb19 .htitem.urgent .htic{color:var(--red);}
.cb19.cb19.cb19 .htitem{-webkit-tap-highlight-color:transparent}
.cb19.cb19.cb19 .htitem{color:var(--ink)}
.cb19.cb19.cb19 .oq-head{display:flex;align-items:flex-start;gap:clamp(14px,1.6vw,22px);margin-bottom:12px}
.cb19.cb19.cb19 .oq-num{flex:none;display:flex;align-items:center;gap:10px;margin-top:-2px}
.cb19.cb19.cb19 .oq-num i{display:block;width:18px;height:1px;background:#cfccc6}
.cb19.cb19.cb19 .oq-num span{font:500 clamp(46px,4.2vw,64px)/.9 'Playfair Display',Georgia,serif;letter-spacing:-.02em;color:var(--oq)}
.cb19.cb19.cb19 .oq-txt{min-width:0;padding-top:2px}
.cb19.cb19.cb19 .oq-k{font:500 10px/1 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#8d8a84;margin-bottom:9px}
.cb19.cb19.cb19 .fcard.oq .fq-title.oq-q{font:600 clamp(24px,2.4vw,34px)/1.08 'Playfair Display',Georgia,serif;letter-spacing:-.015em;color:#141414;margin:0}
.cb19.cb19.cb19 .fcard.oq .fq-title.oq-q i{font-style:italic}
.cb19.cb19.cb19 .fcard.oq .oq-txt .fq-hint{margin:8px 0 0}
.cb19.cb19.cb19 .fcard.oq.done .fq-title.oq-q{font-size:20px}
.cb19.cb19.cb19 .fcard.oq.done .oq-num span{font-size:36px}
@media(max-width:760px){.cb19.cb19.cb19 .oq-num span{font-size:44px}.cb19.cb19.cb19 .oq-num i{width:12px}.cb19.cb19.cb19 .fcard.oq .fq-title.oq-q{font-size:24px}}
.cb19.cb19.cb19 .htbody:not(:has(.htic)){padding:26px 10px 16px}
.cb19.cb19.cb19 .htbody:not(:has(.htic)) .htsub{margin-top:5px}
.cb19.cb19.cb19 .fcard.oq .oq-head{justify-content:center;text-align:center}
.cb19.cb19.cb19 .fcard.oq .oq-txt{text-align:center}
.cb19.cb19.cb19 .htsub{font-size:12.5px;line-height:1.45}
.cb19.cb19.cb19 .htsub{font-family:var(--mono);letter-spacing:.03em}
/* -- CB19 v2: her board sits inside our page (our nav + footer), so the page scrolls and her board rail sticks under our nav -- */
.cb19.cb19.cb19{position:relative;background:#F9F8F6;color:var(--cb-ink);font-family:var(--cb-sans);text-align:left}
.cb19.cb19.cb19 .shell{height:auto;align-items:start}
.cb19.cb19.cb19 .ql{overflow:visible;min-height:calc(100vh - var(--cbnav,63px))}
.cb19.cb19.cb19 .qr{position:sticky;top:var(--cbnav,63px);height:calc(100vh - var(--cbnav,63px));z-index:5}
@media(max-width:860px){.cb19.cb19.cb19 .qr{top:var(--cbnav,63px);height:34vh;z-index:60}.cb19.cb19.cb19 .ql{min-height:0}}
/* our crisp back chevron inside her back pill */
.cb19.cb19.cb19 .fback{display:inline-flex;align-items:center;gap:5px}
.cb19.cb19.cb19 .fback svg{width:6px;height:10px}
/* our "01" title inside her white card: room for her back pill */
.cb19.cb19.cb19 .fcard.oq>.oq-head{margin-top:6px;padding:0 40px}
@media(max-width:600px){.cb19.cb19.cb19 .fcard.oq>.oq-head{padding:0 30px}}
/* the line between questions (our divider) */
.cb19.cb19.cb19 .fcard.oq>.oq-head{padding-bottom:14px;border-bottom:1px solid rgba(17,17,16,0.08);margin-bottom:16px}
/* our hang tags, our values */
.cb19.cb19.cb19 .htrow{--bm:rgba(27,27,27,0.14);--b3yel2:#e3cf62;justify-content:center}
/* "your likes": our manila blue folder pictures in her folder spot */
.cb19.cb19.cb19 .fold-back.cbf{background:center/contain no-repeat;background-color:transparent;border-radius:0;box-shadow:none;top:14px;bottom:18px;filter:drop-shadow(1px 5px 8px rgba(0,0,0,.16))}
.cb19.cb19.cb19 .fold-back.cbf::before{display:none}
.cb19.cb19.cb19 .fold-front.cbf{background:none;box-shadow:none;transform:none;top:auto;bottom:22px;height:auto;justify-content:center;padding:0;pointer-events:none}
.cb19.cb19.cb19 .fold-front.cbf .fold-cap{font:700 22px/1 var(--hand);font-style:normal;color:var(--ink);transform:rotate(-3deg)}
/* our contact + deposit overlays sit above her rail */
.cb19-ov{position:relative;z-index:80}
/* site-wide rules that also match her class names (.opt / .done / .pv / .chips) — neutralised inside her board at the lowest weight, so her own rules win as in her file */
.cb19 :where(.opt){display:block;flex-direction:row;align-items:normal;justify-content:normal;gap:0;position:static;min-height:0;padding:0;border:0;background:none;border-radius:0;box-shadow:none}
.cb19 :where(.opt)::before{content:none}
.cb19 :where(.opt strong,.opt span){font:inherit;color:inherit;margin:0}
.cb19 :where(.done){max-width:none;margin:0;padding:0}
.cb19 :where(.pv){display:block;grid-template-columns:none;gap:0;padding:0}
.cb19 :where(.pv-cap){border-radius:0}
.cb19 :where(.chips){margin:0}
/* her cards scroll into view under our sticky nav (and under her board strip on phones) */
.cb19.cb19.cb19 .fcard{scroll-margin-top:calc(var(--cbnav,63px) + 14px)}
@media(max-width:860px){.cb19.cb19.cb19 .fcard{scroll-margin-top:calc(var(--cbnav,63px) + 34vh + 12px)}}
.cb19 :where(.pin){margin:0;animation:none}
.cb19 :where(.pin)::before{margin-left:0}
.cb19 .pin div:where(:last-child){font:inherit}
.cb19 :where(.mm-kid){display:block;gap:0;align-items:normal;margin:0}
/* Mini & Me (Jordi 11:21 PM): a ~45% copy of the piece, lower right, slightly overlapping, same white sticker edge */
.cb19.cb19.cb19 .pin-sk:has(.mm-twin){width:max-content;margin-left:auto;margin-right:auto}
.cb19.cb19.cb19 .mm-twin{right:-12px;bottom:-3px;transform:rotate(4deg)}
.cb19.cb19.cb19 .pin-sk .mm-twin svg{height:22px;width:auto}
/* our white $100 deposit note, pinned on her blank board */
.cb19.cb19.cb19 .cb-depnote{position:relative;margin:22px auto 0;max-width:250px;background:#fff;padding:16px 16px 13px;box-shadow:1px 5px 14px rgba(0,0,0,.14);transform:rotate(-1.2deg);text-align:center}
.cb19.cb19.cb19 .cb-depnote-pin{position:absolute;top:-5px;left:50%;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:var(--cb-red);box-shadow:0 2px 3px rgba(0,0,0,.3)}
.cb19.cb19.cb19 .cb-depnote p{margin:0;font:400 13px/1.45 var(--cb-sans);color:var(--cb-ink)}
.cb19.cb19.cb19 .cb-depnote svg{width:12px;height:12px;vertical-align:-1px}
@media(max-width:860px){.cb19.cb19.cb19 .cb-depnote{margin-top:10px;padding:10px 12px 8px;max-width:300px}.cb19.cb19.cb19 .cb-depnote p{font-size:11.5px}}
.cb19.cb19.cb19 .cb-depnote-m{display:none}
@media(max-width:860px){.cb19.cb19.cb19 .cb-depnote-d{display:none}.cb19.cb19.cb19 .cb-depnote-m{display:block;margin:18px auto 4px}}

/* ===== end CLAUDE BOARD 1019 (styles) ===== */
/* CB19 CENTER 1020 (Jordi t845u): no dash by 01, 01 + question centred over the tiles */
.cb19.cb19.cb19 .oq-num i{display:none}
.cb19.cb19.cb19 .oq-head{justify-content:center}
.cb19.cb19.cb19 .oq-txt{text-align:center}
/* CB19 CENTER 1020b (t848u): question centred over the tiles; 01 sits at the left edge, not pushing it */
.cb19.cb19.cb19 .oq-head{position:relative;display:block}
.cb19.cb19.cb19 .oq-num{position:absolute;left:0;top:0;margin:0}
.cb19.cb19.cb19 .oq-txt{text-align:center;padding:2px 50px 0}
@media(max-width:760px){.cb19.cb19.cb19 .oq-txt{padding:2px 0 0 56px;text-align:left}}
/* CB19 CENTER 1020c (t850u): phone, 01 up in the top-left corner level with Back, question centred full width */
@media(max-width:760px){
.cb19.cb19.cb19 .oq-head{padding-top:30px}
.cb19.cb19.cb19 .oq-num{top:-20px;left:0}
.cb19.cb19.cb19 .oq-num span{font-size:34px}
.cb19.cb19.cb19 .oq-txt{padding:2px 0 0;text-align:center}
}
/* STEPS HERO 1020 (preview): full-bleed photo (her motion blur untouched) + grey title tucked next to the 4 */
.tw.tw-req.tw-photo{overflow-x:clip}
.tw-photo .tw-top{z-index:0}
.tw-photo .tw-ph{position:absolute;z-index:-1;top:calc(var(--u) * -37);bottom:calc(var(--u) * 12);left:50%;width:100vw;transform:translateX(-50%);background:url(/assets/studio/steps-hero-1020.webp) right center/cover no-repeat}
.tw-photo .tw-top{height:calc(var(--u) * 250)}
.tw-req .tw-top{padding-left:calc(var(--u) * 132)}
@media(max-width:760px){
  .tw-photo .tw-ph{top:-34px;bottom:-14px;background-image:url(/assets/studio/steps-hero-1020-1400.webp);background-position:78% center}
  .tw-photo .tw-top{height:auto;min-height:190px;padding-bottom:0}
  .tw-req .tw-top{padding-left:0}
}
@media(max-width:760px){
  .tw-photo .tw-top{min-height:0}
  .tw-photo .tw-ph{position:relative;z-index:0;grid-column:1/-1;grid-row:2;top:auto;bottom:auto;left:auto;transform:none;width:auto;height:230px;margin:22px -20px 0;background-position:92% center;background-size:cover}
}
/* STEPS HERO 1020b (t854u-t856u): photo bleeds up under a see-through nav + back row, like her Photoshop; title tight to the 4 */
html.twph-top .hdr{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;border-bottom-color:transparent!important}
.tw-photo .tw-ph{top:calc(var(--u) * -37 - 46px - 63px)}
.tw-req.tw-photo .tw-top{padding-left:calc(var(--u) * 104)}
@media(max-width:760px){
  .tw-photo .tw-ph{position:absolute;z-index:-1;grid-row:auto;grid-column:auto;margin:0;height:auto;top:calc(-34px - 46px - 63px);bottom:-10px;left:50%;width:100vw;transform:translateX(-50%);background-image:url(/assets/studio/steps-hero-1020.webp);background-size:auto 100%;background-position:right bottom}
  .tw-photo .tw-top{padding-bottom:var(--twph-pad,250px)}
  .tw-req.tw-photo .tw-top{padding-left:0}
}
/* STEPS HERO 1020c (t858u): phone = same zoomed-out scale as the strip, title overlaid; steps 1-4 in one condensed row */
@media(max-width:760px){
  .tw-photo .tw-ph{position:absolute!important;z-index:-1;top:-143px;bottom:auto;height:270px;left:50%;width:100vw;transform:translateX(-50%);margin:0;background-size:cover;background-position:right center}
  .tw-photo .tw-top{padding-bottom:0;min-height:127px;margin-bottom:22px}
  .tw-req .tw-cards{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0}
  .tw-req .tw-cards li{min-height:0;padding:12px 6px 4px 8px;border-left:1px solid #e3e0da;border-top-width:3px}
  .tw-req .tw-cards li:first-child{border-left:0;padding-left:2px}
  .tw-req .tw-n{font-size:26px;margin-bottom:8px}
  .tw-req .tw-cards h3{font-size:13px;line-height:1.15;margin:0}
  .tw-req .tw-cards p{display:none}
}
/* STEPS HERO 1020d: phone uses a taller copy (wall extended above, blur + right edge untouched), title in 2 lines on the wall */
@media(max-width:760px){
  .tw-photo .tw-ph{top:-143px;height:390px;background-image:url(/assets/studio/steps-hero-1020-phone.webp)!important;background-size:cover;background-position:right bottom}
  .tw-photo .tw-top{min-height:247px;margin-bottom:22px;align-items:start;column-gap:10px}
  .tw-photo .tw-big{font-size:58px}
  .tw-photo .tw-h{font-size:19.5px;line-height:1.08;white-space:nowrap}
  .tw-photo .tw-k{margin-bottom:7px}
}
@media(max-width:760px){.tw-req .tw-cards li{margin-top:0!important}.tw-photo .tw-big{font-size:64px;line-height:.9}}
/* CB19 POLISH 1020 (t857u): board headings in Fraunces 800 italic (was Claude's Bowlby One); thicker running-total bar; phone empty state raised so nothing is cut */
.cb19.cb19.cb19 .qr-title,.cb19.cb19.cb19 .qr-empty-head,.cb19.cb19.cb19 .stk-po-name,.cb19.cb19.cb19 .stk-po-go,.cb19.cb19.cb19 .team-center-lb{font-family:'Fraunces',Georgia,serif;font-weight:800;font-style:italic;letter-spacing:-.01em}
.cb19.cb19.cb19 .qr-empty-head{font-size:26px;line-height:1.08}
.cb19.cb19.cb19 .qr-title{font-size:22px}
.cb19.cb19.cb19 .qr-foot{min-height:96px;padding:0 22px;box-sizing:border-box}
.cb19.cb19.cb19 .qr-foot .qr-est-label{font-size:10px}
.cb19.cb19.cb19 .qr-foot .qr-est-num{font-size:34px}
@media(max-width:860px){
  .cb19.cb19.cb19 .qr{height:calc(var(--vvh,100vh)*0.38)}
  .cb19.cb19.cb19 .qr-foot{min-height:48px;padding:0 14px}
  .cb19.cb19.cb19 .qr-foot .qr-est-label{font-size:8.5px}
  .cb19.cb19.cb19 .qr-foot .qr-est-num{font-size:24px}
  .cb19.cb19.cb19 .qr-empty{padding:10px 10px 8px}
  .cb19.cb19.cb19 .qr-empty-head{font-size:21px;margin-bottom:6px}
  .cb19.cb19.cb19 .qr-empty-circle{width:30px;height:30px;font-size:17px;margin-bottom:5px}
  .cb19.cb19.cb19 .qr-empty-main{font-size:14px;margin-bottom:2px}
  .cb19.cb19.cb19 .qr-title{font-size:18px}
}
/* STEPS HERO 1020e: phone title raised closer to Back (photo stays put) */
@media(max-width:760px){
  .tw-photo .tw-top{margin-top:-45px;min-height:292px}
  .tw-photo .tw-ph{top:-98px}
}
/* JORDI 1020 10:33 (t863u/t864u): board top strip "The Dirty Denim Shop · scroll & tap" hidden (flag: remove this rule to bring back); phone "by Jordi" centred under Dirty Denim; welcome heading lines spaced so y/b don't touch */
.cb19.cb19.cb19 .ql-bar{display:none!important}
@media(max-width:900px){.hdr .logo .lg-m,body.navf-picked .hdr .logo .lg-m{align-items:center!important}.hdr .logo i,body.navf-picked .hdr .logo i{text-align:center!important;margin-left:0!important;margin-right:0!important;padding-left:.2em}}
.bh-sec .title{line-height:1.12!important}
/* STEPS HERO 1020f (t865u, her mobile screenshot): tight under the nav, faint nav divider, photo still bleeds under the nav. Phone Back row hidden on this page only (remove rule to restore). */
html.twph-top .hdr{border-bottom:1px solid rgba(30,30,30,.16)!important;box-shadow:none!important}
@media(max-width:760px){
  body:has(.tw-photo) .pgback{display:none!important}
  .tw-photo .tw-top{margin-top:-9px!important;min-height:217px!important}
  .tw-photo .tw-ph{top:-88px!important;height:305px!important}
}
@media(max-width:760px){.tw-photo .tw-top{margin-bottom:0!important;min-height:239px!important}}
/* NAV BRAND 1020 (t866u): phones read "The Dirty Denim Shop", by Jordi centred under it */
.hdr .logo .lg-ph{display:none}
@media(max-width:900px){.hdr .logo .lg-1 .lg-ph{display:inline}.hdr .logo .lg-1{white-space:nowrap}}
@media(max-width:760px){.tw-photo .tw-top{margin-bottom:0!important;min-height:239px!important}}
@media(max-width:760px){.tw-req.tw-photo .tw-top{margin-bottom:0!important;min-height:217px!important}.tw-req.tw-photo .tw-cards{margin-top:0!important}}
/* STEPS HERO 1020g (t869u) desktop: "How to work with me" top lines up with the top of the 4; photo runs straight into the coloured card tops */
@media(min-width:761px){
  .tw-req.tw-photo .tw-k,.tw-req.tw-photo .tw-h{transform:translateY(calc(var(--u)*13.5))}
  .tw-req.tw-photo .tw-ph{bottom:0!important}
}
/* CB19 POLISH 1020b (t878u/t879u/t880u): phone board back to its original height (34%), thick total bar kept; empty-state text centred + condensed so nothing is cut;
   no big gap between the last line of the empty state and the Live Board bar (desktop panel hugs its content while the board is empty); welcome reads as its own section title */
@media(max-width:860px){
  .cb19.cb19.cb19 .qr{height:calc(var(--vvh,100vh)*0.34)}
  .cb19.cb19.cb19 .qr-stream:has(> .qr-empty){display:flex;flex-direction:column;justify-content:center;padding:6px 12px}
  .cb19.cb19.cb19 .qr-empty{padding:0 6px;margin:0}
  .cb19.cb19.cb19 .qr-empty-head{font-size:19px;line-height:1.08;margin:0 auto 5px;max-width:290px}
  .cb19.cb19.cb19 .qr-empty-circle{width:26px;height:26px;font-size:15px;margin:0 auto 4px}
  .cb19.cb19.cb19 .qr-empty-main{font-size:13px;line-height:1.25;margin-bottom:2px}
  .cb19.cb19.cb19 .qr-empty-sub{line-height:1.5}
}
@media(min-width:861px){
  /* empty board: panel = bar + empty state + total bar, no dead space; full height returns as soon as something is pinned */
  .cb19.cb19.cb19 .qr:has(.qr-stream > .qr-empty){height:auto;align-self:start;border-bottom:1px solid var(--cb-b);box-shadow:0 14px 30px -18px rgba(0,0,0,.18)}
  .cb19.cb19.cb19 .qr-stream:has(> .qr-empty){flex:0 0 auto;overflow:visible;padding:14px 14px 22px}
  .cb19.cb19.cb19 .qr-empty{padding:22px 10px 0}
}
/* welcome = section title, then a clear break before the board */
html.bts-on .bh-sec{padding:clamp(40px,4.4vw,64px) 0 clamp(34px,3.4vw,48px);margin-bottom:0;border-bottom:1px solid rgba(30,30,30,.16)}
.bh-sec h2.title.bh-h{font-size:clamp(36px,4.5vw,64px);letter-spacing:-.022em}
html.bts-on .bh-sec + .cb19,html.bts-on .bh-sec ~ .cb19{box-shadow:inset 0 14px 18px -14px rgba(0,0,0,.10)}
@media(max-width:760px){
  html.bts-on .bh-sec{padding:30px 0 26px}
  .bh-sec h2.title.bh-h{font-size:36px}
}
/* CB19 1020c: total bar labels never wrap */
.cb19.cb19.cb19 .qr-foot *{white-space:nowrap}
/* SHOP SIDE 1020 (Jordi t894u): Shop by city ▾ · Coaches' picks · Filter by category ▾ · Shop by art — same sidebar type/lines as before; open lists push "Shop by art" down */
.ss20 .fs-types{margin:0}
.ss20 .ss20-picks li a{font:500 15px var(--sans);color:var(--ink)}
.ss20 .ss20-picks li a.on{font-weight:600}
.ss20 .ss20-cats{margin:0 0 6px 10px}
.ss20 .ss20-cats li a{font-size:14px;padding:8px 2px}
.ss20 .ss20-cats[hidden],.ss20 .fs-cl[hidden]{display:none!important}
.ss20 a.ss20-art{text-decoration:none;box-sizing:border-box}
.ss20 .chev-rt{flex:none;margin-right:2px}
/* SHOP SIDE 1020: phone drawer — the picks-photo section isolates its stacking, so the open drawer slid under the sticky nav + page Back chevron.
   While the drawer is open, lift that section above the nav so the 4 lines + × are clear (new sidebar only) */
@media(max-width:820px){
  .cats-grid:has(.cityside.open .ss20){z-index:90}
  .cityside .ss20{margin-top:34px}
}
/* SHOP SIDE 1020: phone drawer — hide the auto-added drawer Back chevron (.pbk) while the new sidebar is on; the × closes it. Page Back (.pgbk) stays under the drawer. */
@media(max-width:820px){.cityside:has(.ss20) > .pbk{display:none!important}}
/* SHOP SIDE 1020b (Jordi t906u): "Shop by art" row stands apart in Fraunces 800 italic (board-heading font); same row, arrow + spot unchanged; sized down so it sits optically with the 15px Barlow rows */
.ss20 a.ss20-art{align-items:center}
.ss20 a.ss20-art > span{font-family:'Fraunces',Georgia,serif;font-weight:800;font-style:italic;font-size:15px;line-height:19px;letter-spacing:-.005em;white-space:nowrap}
/* CITY NAMES 1020 (t907u): small "Countries" sub-heading under the cities in the new shop sidebar */
.ss20 .fs-cl .ss20-cc{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8a857d;padding:14px 2px 4px;border:0;list-style:none}
/* NO TEAM NAMES 1020: small "Countries" sub-heading inside the other city drop-downs (gallery tag row, collection pages) */
.cdrop .cc20{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8a857d;padding:12px 10px 4px;list-style:none;pointer-events:none}
/* NO TEAM NAMES 1020: the gallery tag-row city drop-down was clipped by the rail (overflow:hidden) and hidden behind the picks section — lift + unclip only while it's open */
.rail:has(#railcities:not([hidden])){overflow:visible;z-index:7}

/* STEPS COPY 1020 (SEED.stepsCopy1020): whole 01 / 04 card is a link (stretched, layout unchanged) */
.tw-c1020 .tw-cl{position:absolute;inset:0;z-index:1}
.tw-c1020 li:has(.tw-cl):hover h3{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
/* MM SIZES 1020 (SEED.mmSizes2_1020): regular Make it mine panel gets the mascot pop-up's two dropdowns, same look; side by side on phones too */
.mm2-size .mmy-szrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.mm2-size .mmy-szsel{min-width:0}
.mm2-size .mmy-szsel select{width:100%;min-width:0;font:16px/1.5 var(--sans);border:1px solid var(--line);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;border-radius:3px;padding:13px 40px 13px 14px;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;text-overflow:ellipsis}
.mm2-size .mmy-szsel select:focus{border-color:var(--ink)}
@media (max-width:760px){.mm2-size .mmy-szrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.mm2-size .mmy-szsel select{padding:12px 32px 12px 11px;background-position:right 11px center}}
/* MARBLES IN BMU 1020 (SEED.marblesInBMU1020, t954u): the home-hero marbles live in the Baby Mascot Universe band. Same .mq/.mq-b look;
   phone only: a little extra floor under the hoodie stickers for the pile to sit on (band padding 44px → 92px). */
.mq.mq-bmu{z-index:4}
@media(max-width:760px){
  .sb-band.sb-v2[data-sbband="baby-mascots"]:has(.mq-bmu){padding-bottom:92px}
  .mq-bmu .mq-in{border-width:2px}
}
.tw-c1020 h3{text-wrap:balance}
/* MM FOLD 1020 (SEED.mmFold1020): Make it mine sections — thin rules + small caps headers like the field labels, same chevron as the size dropdowns */
.mmf-wrap{border-top:1px solid #e3e0da;margin:0 0 18px}
.mmf{border-bottom:1px solid #e3e0da}
.mmf-h{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;padding:15px 2px;cursor:pointer}
.mmf-h:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.mmf-t{flex:none;font:600 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#1b1b1b}
.mmf-t .mim-opt{font:400 11px/1 var(--sans);letter-spacing:0;text-transform:none;color:#8a8a8a;margin-left:4px}
.mmf-s{flex:1;min-width:0;font:400 13px/1.3 var(--sans);color:#8a8a8a;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mmf-car{flex:none;width:12px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center;transition:transform .25s ease}
.mmf.open .mmf-car{transform:rotate(180deg)}
.mmf.open .mmf-s{visibility:hidden}
.mmf-b{display:none;padding:2px 2px 18px}
.mmf.open .mmf-b{display:block;animation:mmfIn .28s ease}
@keyframes mmfIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mmf.open .mmf-b{animation:none}.mmf-car{transition:none}}
.mmf-b > .field:last-of-type,.mmf-b > .row2:last-child{margin-bottom:0}
.mmf-solo > span:first-child{display:none}

/* Oct 20 t979u: 04 "Create a custom order" reads as a button: underline + arrow (preview, stepsCopy1020) */
.tw-c1020 li:nth-child(4) p{display:inline-block;color:#121212;font-weight:600;letter-spacing:.02em;text-decoration:underline;text-underline-offset:.32em;text-decoration-thickness:1.5px;text-decoration-color:#4a5f8f}
.tw-c1020 li:nth-child(4) p::after{content:" \2192";display:inline-block;margin-left:.35em;text-decoration:none;transition:transform .2s}
.tw-c1020 li:nth-child(4):hover p::after{transform:translateX(4px)}

/* Oct 20 t985u: /shop four steps on phone = one condensed horizontal strip, bold black titles only (preview, stepsCopy1020) */
@media(max-width:760px){
  .tw-in .tw-c1020{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0}
  .tw-in .tw-c1020 li{min-height:0!important;padding:10px 5px 4px 7px!important;border-left:1px solid #e3e0da!important;border-top-width:3px;margin-top:0!important}
  .tw-in .tw-c1020 li:first-child{border-left:0!important;padding-left:2px!important}
  .tw-in .tw-c1020 .tw-n{font-size:20px;margin-bottom:6px}
  .tw-in .tw-c1020 h3{font-size:12.5px!important;line-height:1.15;margin:0!important;text-wrap:balance}
  .tw-in .tw-c1020 p{display:none!important}
}

/* ===== IDEA BTN 1020 (SEED.ideaBtn1020, Jordi t981u/t982u): "Start from this idea" — outlined in black, same Barlow caps + size + height as Make it mine,
   side by side on desktop, full width under it on phones ===== */
.pv .mm-row.has-idea{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px}
.pv .mm-row .btn.mm-idea{display:inline-flex;align-items:center;justify-content:center;gap:14px;box-sizing:border-box;background:transparent;color:var(--ink);border:1.5px solid var(--ink);border-radius:0;
  padding:15.5px 22px;font:600 14px/1.25 var(--mono);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;max-width:none;white-space:nowrap}
.pv .mm-row .btn.mm-idea:hover{background:var(--ink);color:var(--paper)}
.pv .mm-row .btn.mm-idea:hover .mm-chev{transform:translateX(4px)}
@media (max-width:520px){.pv .mm-row.has-idea .mm-btn,.pv .mm-row .btn.mm-idea{width:100%;justify-content:center}}
/* pieces with a mascot by Make it mine: Penny keeps her approved spot (Oct 19 FINAL, gate R30), so the button sits on its own row under her */
.pv .mm-idea-row{display:flex;margin:4px 0 14px}
.pv .mm-idea-row .btn.mm-idea{display:inline-flex;align-items:center;justify-content:center;gap:14px;box-sizing:border-box;background:transparent;color:var(--ink);border:1.5px solid var(--ink);border-radius:0;
  padding:15.5px 22px;font:600 14px/1.25 var(--mono);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;max-width:none;white-space:nowrap}
.pv .mm-idea-row .btn.mm-idea:hover{background:var(--ink);color:var(--paper)}
@media (max-width:520px){.pv .mm-idea-row .btn.mm-idea{width:100%}}
/* ===== end IDEA BTN 1020 ===== */

/* ===== PEN NOTE SPLIT 1020 (SEED.penNoteSplit1020): 2-line "Ask for me to personalize this style for you." note on the right of Make it mine
   (placed by pvPen3Fit); thin, short, crisp arrow in the note's grey, tip 5px off the button. Desktop only, like the other notes. ===== */
.mm-pen3{display:none;pointer-events:none;z-index:3}
.mm-pen3 img{display:block;width:100%;height:auto}
.mm-pen3 .pen-arr3{position:absolute;left:-30px;bottom:-8px;width:34px;height:29px;overflow:visible;fill:none;stroke:#6e6e6c;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:1001px){.pv .mm-row{position:relative}.mm-pen3{display:block}}
@media(max-width:1000px){.mm-pen3{display:none!important}}
/* ===== end PEN NOTE SPLIT 1020 ===== */

/* ===== IDEA BOARD INLINE 1020 (SEED.ideaBoardInline1020): the order board in place of "More from …" under the listing; the garment's flying copy ===== */
.pv-ib{position:relative;border-top:1px solid var(--line,#e6e1d8);margin-top:24px;scroll-margin-top:var(--hdrh,63px)}
.pv-ib.drop{animation:pvIbDrop .7s cubic-bezier(.2,.8,.25,1) both;transform-origin:50% 0}
@keyframes pvIbDrop{from{opacity:0;transform:translateY(-48px) scaleY(.96);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
.pv-ib-fly{position:fixed;z-index:400;margin:0;pointer-events:none;filter:drop-shadow(0 14px 18px rgba(0,0,0,.22));transform-origin:50% 50%}
.pv-ib-fly img{position:absolute;display:block;margin:0;max-width:none;object-fit:contain}
.cb19 .fold .fthumb.ib-wait{opacity:0}
@media (prefers-reduced-motion:reduce){.pv-ib.drop{animation:none}}
/* ===== end IDEA BOARD INLINE 1020 ===== */

/* Oct 20 t1005u: 3 steps, the from-scratch card sits apart as the other route (preview, SEED.threeSteps1020) */
.tw-3s{column-gap:0}
.tw-3s li:nth-child(4){margin-left:calc(var(--u) * 34);border-left:0!important}
.tw-3s li:nth-child(4) .tw-n{font-style:italic}


@media(max-width:760px){.tw-in .tw-3s li:nth-child(4){margin-left:8px!important;border-left:0!important;padding-left:6px!important}}
@media(max-width:760px){.tw-in .tw-c1020 h3{font-size:11px!important;letter-spacing:-.015em}.tw-in .tw-c1020 li{padding-right:3px!important}}
/* BOARD WIDE 1020 (SEED.boardWide1020): left column at the page content edge, board right next to it filling the rest. Desktop only. */
@media(min-width:861px){
  .cb19.cb19.cb19.cb-wide1020 .shell{grid-template-columns:minmax(0,calc(var(--pad) + 600px)) minmax(340px,1fr)}
  .cb19.cb19.cb19.cb-wide1020 .feed{align-items:stretch;padding-left:var(--pad);padding-right:20px}
  .cb19.cb19.cb19.cb-wide1020 .fcard{max-width:none}
  /* t1021u: board = a card in the same row as the white card: same top edge, 20px gap, right margin = page margin */
  .cb19.cb19.cb19.cb-wide1020 .shell{padding-right:var(--pad);box-sizing:border-box}
  .cb19.cb19.cb19.cb-wide1020 .qr{margin-top:18px;top:calc(var(--cbnav,63px) + 18px);height:calc(100vh - var(--cbnav,63px) - 36px);border:1px solid var(--cb-b);box-shadow:0 2px 10px rgba(0,0,0,0.04)}
}
/* end BOARD WIDE 1020 */
/* FOLD SHUT 1020 (SEED.boardFoldShut1020): closed blue folder on the Claude board, same look as the approved b3 version */
.cb19.cb19.cb19 .fold.fold-shut{display:flex;justify-content:center;align-items:flex-start;padding-top:34px;box-sizing:border-box}
.cb19 .cbshut-art{position:relative;width:132px}
.cb19 .cbshut-img{position:relative;z-index:2;width:100%;display:block;filter:drop-shadow(1px 5px 8px rgba(0,0,0,.16))}
.cb19 .cbshut-lbl{position:absolute;z-index:3;left:8%;right:12%;top:38%;text-align:center;font:700 23px/1 var(--hand);color:var(--ink);transform:rotate(-4deg)}
.cb19 .cbshut-lbl small{display:block;font:700 15px/1.1 var(--hand);opacity:.7;margin-top:4px}
.cb19 .cbshut-out{position:absolute;z-index:1;width:62%}
.cb19 .cbshut-out img{width:100%;height:auto;max-height:90px;object-fit:contain;display:block;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(1px 3px 5px rgba(0,0,0,.22))}
.cb19 .cbshut-out.top{left:12%;top:-26%;transform:rotate(-8deg)}
.cb19 .cbshut-out.side{right:-40%;top:26%;transform:rotate(10deg)}
.cb19 .fold-shut.seal .cbshut-art{animation:b3shut .5s ease-out both}
/* end FOLD SHUT 1020 */
/* HEAR EDIT ADD 1020 (SEED.hearEditAdd1020): 'Order N' card on the board (PLACEHOLDER, no scribble art yet) + order window icon column */
.cb19.cb19.cb19 .pin.ordpin{width:116px;min-height:70px;background:#fff;border:1px solid var(--cb-b);box-shadow:0 3px 10px rgba(0,0,0,.10);padding:14px 10px 10px;text-align:center;cursor:pointer;box-sizing:border-box}
.cb19.cb19.cb19 .pin.ordpin:hover{box-shadow:0 6px 16px rgba(0,0,0,.16)}
.cb19 .ordpin-k{font-family:'DM Serif Display',serif;font-style:italic;font-size:18px;line-height:1.1;color:var(--cb-ink)}
.cb19 .ordpin-v{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--cb-light);margin-top:5px}
.cb19 #order-overlay:has(.ow-grid) .receipt-paper{width:min(520px,94vw)!important}
.cb19 #order-overlay:has(.ow-grid) .receipt-body > .receipt-actions:not(.ow-acts){display:none}
.cb19 .ow-grid{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:14px;align-items:start}
.cb19 .ow-ics{display:flex;flex-direction:column;gap:10px;max-height:min(46vh,330px);overflow-y:auto;overscroll-behavior:contain;padding:4px 4px 4px 12px;border-left:1px dashed var(--cb-b)}
.cb19 .ow-ic{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0}
.cb19 .ow-ic-g{width:40px;height:40px;color:var(--cb-ink)}
.cb19 .ow-ic-g svg{width:100%;height:100%}
.cb19 .ow-ph img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(1px 2px 3px rgba(0,0,0,.18))}
.cb19 .ow-ic-l{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:.08em;text-transform:uppercase;color:var(--cb-mid);text-align:center;line-height:1.3;max-width:64px;overflow-wrap:anywhere}
.cb19 .ow-acts{display:flex;flex-direction:column;gap:8px}
/* end HEAR EDIT ADD 1020 */
/* t1026u Order N window = the site's locker item window (.bxsc-card), one column */
.bxsc-card.ow2{grid-template-columns:1fr;width:min(640px,94vw);gap:18px}
.bxsc-card.ow2 .ow2-hero{aspect-ratio:auto;height:clamp(120px,20vh,190px);color:var(--ink)}
.bxsc-card.ow2 .ow2-hero svg{height:72%;width:auto;max-width:80%}
.bxsc-card.ow2 .bxsc-card-t h3{margin:4px 0 12px}
.ow2-list{list-style:none;margin:0 0 18px;padding:0;border-top:1px solid #e3e0da}
.ow2-li{display:grid;grid-template-columns:26px 110px minmax(0,1fr);gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #e3e0da}
.ow2-ic{width:22px;height:22px;color:var(--ink)}
.ow2-ic svg{width:100%;height:100%}
.ow2-k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#777}
.ow2-v{font:400 15px/1.35 Barlow,system-ui,sans-serif;color:#222;overflow-wrap:anywhere}
.ow2-ph{display:flex;gap:8px;flex-wrap:wrap}
.ow2-ph img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(1px 2px 3px rgba(0,0,0,.18))}
@media (max-width:520px){.ow2-li{grid-template-columns:22px 84px minmax(0,1fr);gap:8px}.bxsc-card.ow2 .bxsc-card-a .btn{flex:1;justify-content:center}}
.cb19.cb19.cb19 .pin.ordprice{width:auto}
/* SPEED COLORS 1020 (SEED.speedColors1020), v2 t1044u: tiles keep their original look, only the icon LINE is coloured:
   Standard = baby blue, Rushed = baby yellow, Urgent = red. Board timeline pin = square tile like the question tiles. */
.cb19.cb19.cb19.cb-speed1020 .htitem:nth-child(1) .htic{color:var(--cb-blue3)}
.cb19.cb19.cb19.cb-speed1020 .htitem:nth-child(2) .htic{color:#E6CF4F}
.cb19.cb19.cb19.cb-speed1020 .htitem:nth-child(3) .htic{color:var(--cb-red)}
.cb19.cb19.cb19.cb-speed1020 .pin.htpin.tlp-0 .htic{color:var(--cb-blue3)}
.cb19.cb19.cb19.cb-speed1020 .pin.htpin.tlp-1 .htic{color:#E6CF4F}
.cb19.cb19.cb19.cb-speed1020 .pin.htpin.tlp-2 .htic{color:var(--cb-red)}
.cb19.cb19.cb19.cb-speed1020 .pin.htpin{width:104px}
.cb19.cb19.cb19.cb-speed1020 .pin.htpin .htbody{width:100%;aspect-ratio:1/1;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 6px}
.cb19.cb19.cb19.cb-speed1020 .pin.htpin .htic,.cb19.cb19.cb19.cb-speed1020 .pin.htpin .htname{width:100%}
/* no fills: a picked tile stays white, picked = ink outline */
.cb19.cb19.cb19.cb19.cb-speed1020 .htitem.on .htbody{background:var(--cb-w);border-color:var(--cb-ink,#2D2B29);box-shadow:0 0 0 1px var(--cb-ink,#2D2B29),0 6px 14px rgba(0,0,0,.10)}
/* t1054u: the "Rushed" word is black like Standard (not red); Urgent word stays red to match its car */
.cb19.cb19.cb19.cb19.cb-speed1020 .htitem:nth-child(2) .htname,.cb19.cb19.cb19.cb19.cb-speed1020 .pin.htpin.tlp-1 .htname{color:var(--cb-ink,#2D2B29)!important}
/* end SPEED COLORS 1020 */

/* ===== DARK RACK 1020 v2 (SEED.darkRack1020, PREVIEW, Jordi t1070u: "The whole page is dark mode, not a black version of the rod"). On the 'fancy'
   pieces (SEED.darkRackPieces) the WHOLE piece page goes dark: page, header/nav, text, links, buttons, board, footer. Same layout; same locked rod +
   hook images; no filter on the garment. One soft warm overhead glow on the rod + shoulders (behind everything, not over the garment).
   Palette shared with the dressing-room dark page: near-black warm #121110, cream #f2e2c8. The old black box panel is gone. ===== */
/* t1083u: not near-black (too intimidating) - a soft warm wall-tone gradient, like the lit wall behind the hanging garment: lighter at the top/rod, gently darker down the page */
html.pv-darkpage{background:var(--dt-end,#332c27)}
body.pv-darkpage{background:linear-gradient(180deg,var(--dt-0,#625649) 0,var(--dt-1,#574c41) 420px,var(--dt-2,#463d35) 1100px,var(--dt-3,#3a332d) 1900px,var(--dt-end,#332c27) 100%) no-repeat;background-color:var(--dt-end,#332c27)}
body.pv-darkpage{--paper:var(--dt-paper,#4a4138);--paper2:var(--dt-paper2,#554b41);--wall:var(--dt-wall,#5d5246);--line:rgba(242,226,200,.2);--ink:#f2e2c8;--ink2:#cfc2ad;--mute:#cbbfab;--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  color:#f2e2c8}
body.pv-darkpage .pv-stage{position:relative;isolation:isolate}
body.pv-darkpage .pv-stage::before{content:"";position:absolute;left:var(--dt-glow-x,0);right:var(--dt-glow-x,0);top:var(--dt-glow-t,0);height:var(--dt-glow-h,min(420px,70%));z-index:-1;pointer-events:none;
  background:var(--dt-glow,radial-gradient(closest-side,rgba(255,234,200,.16),rgba(255,234,200,.075) 45%,rgba(255,234,200,.02) 78%,transparent))}   /* DARK TONE 1020 t1164u: a tone can set its own light spot (--dt-glow / --dt-glow-h); unset = this shared glow */
body.pv-darkpage .hdr .nav a{color:#e2d5c0!important}
body.pv-darkpage .hdr .nav a:hover,body.pv-darkpage .hdr .nav a.on,body.pv-darkpage .hdr .nav a[aria-current]{color:#f2e2c8!important}
body.pv-darkpage .pv-price a.loginest{color:#f2e2c8}
body.pv-darkpage .pv-more .p2-vd{color:#e2d5c0}
/* ELITE DARK 1020 (t1096u): readability of the parts the jerseys didn't have (lede, back/front labels, pen notes = ink → cream, tags) */
body.pv-darkpage .pv .lede{color:#eadcc5}
body.pv-darkpage .pv .pv-lab{color:#ddd0bb}
body.pv-darkpage .pv .pen-img{filter:invert(1) sepia(.35) brightness(1.05)}
body.pv-darkpage .pv .tagpill,body.pv-darkpage .pv [class*=chip]{border-color:rgba(242,226,200,.45);color:#eadcc5}
body.pv-darkpage .pathbar{border-top-color:rgba(242,226,200,.18)}
body.pv-darkpage .pv .mm-row .btn.mm-idea.mm-fancy{background:#2e2823;border-color:#2e2823;color:#f6ead6}
/* t1225u: the AKON 'Sorry' button fill = neutral charcoal (was warm #2e2823), matching the REF MATCH tone */
body.pv-darkpage .pv .mm-row .btn.mm-idea.mm-fancy{background:#2e2d2c;border-color:#2e2d2c}
body.pv-darkpage .pv .mm-row .btn.mm-idea.mm-fancy:hover{background:#231e1a}
body.pv-darkpage .pv-stage .pv-hint{color:#d8ccb8}
body.pv-darkpage main,body.pv-darkpage .pv-stage{background:transparent}
body.pv-darkpage .hdr{background:var(--dt-hdr,rgba(98,86,73,.9));border-bottom-color:rgba(242,226,200,.16)}
/* ===== end DARK RACK 1020 ===== */
/* DARK RACK 1020 fancy CTA (Jordi t1043u): same size/caps/height as Make it mine, in the rack's near-black with warm cream text + a faint warm edge */
.pv .mm-row .btn.mm-idea.mm-fancy{background:#121110;color:#f3e8d4;border:1.5px solid #121110;box-shadow:inset 0 1px 0 rgba(255,236,206,.22),0 0 0 1px rgba(201,168,118,.35)}
.pv .mm-row .btn.mm-idea.mm-fancy:hover{background:#000;color:#fff7e8}
@media (max-width:520px){.pv .mm-row .btn.mm-idea.mm-fancy{font-size:12px;letter-spacing:.11em;padding-left:12px;padding-right:12px;gap:10px;min-height:52px}}

/* COACH BLACK 1020 (Jordi t1049u): "(it's me, I'm the coach)" in Coach's picks stays black, readable on the photo. */
.cats-grid .ca-coach, .picks-photo .ca-coach, small.ca-coach { color: #111 !important; }

/* ===== IDEA BOARD V2 1020 (SEED.ideaBoardV2_1020): the board sits under the piece in the LEFT column, stacked like the phone layout (board, then the
   questions under it). Nothing is sticky here: the rack column stops being sticky while the board is open, the board panel scrolls with the page. ===== */
.pv-has-ib2 .pv-gal{position:static}
.pv-ib2{margin-top:0;border-top:0;min-width:0}
@media (min-width:801px){.pv-ib2{grid-column:1/-1;grid-row:2;justify-self:center;width:min(100%,720px)}}   /* t1071u: centred on the page, still board then questions */
.cb19v2 .spin .bx.v2x.fit{position:absolute;margin:0;z-index:5}
.cb19v2.cb19.cb19 .shell{display:block;height:auto;min-height:0}
.cb19v2.cb19.cb19.cb19 .qr{position:relative;top:auto;height:auto;z-index:auto;border:1px solid var(--cb-b,#e6e1d8);border-radius:6px;box-shadow:none;overflow:hidden}
.cb19v2.cb19.cb19.cb19 .qr-stream{flex:none;overflow:visible;height:auto}
.cb19v2.cb19.cb19.cb19 .ql{height:auto;min-height:0;overflow:visible;padding-left:0;padding-right:0}
.cb19v2.cb19.cb19.cb19 .chips-wrap{position:static;top:auto}
.cb19v2.cb19.cb19.cb19 .feed{padding-left:0;padding-right:0;max-width:none}
.cb19v2 .spin.ib-wait{opacity:0}
.cb19v2 #ql-scroll > #feed ~ div:not([id]):not([class]){height:18px!important;min-height:0!important}   /* her end spacer (120px) was for the full-page board */
.cb19v2 #feed{padding-bottom:0!important}
@media(max-width:860px){.cb19v2.cb19.cb19.cb19 .qr{height:auto}.cb19v2.cb19.cb19 .qr .fold{transform:none;margin-bottom:0}}
/* ===== end IDEA BOARD V2 1020 ===== */

/* ===== ONE OF ONE 1020 + AKON/NE-YO PAIR 1020 (t1097u–t1101u, PREVIEW): one main button (opens the order board with the piece pinned) + a quiet
   text link to the project page; the AKON / NE-YO toggle is the usual side toggle (.pv-cl-tog), under the rod. ===== */
.pv .mm-row.one1{display:flex;flex-wrap:wrap;gap:12px}
.pv .mm-row.one1 .btn.mm-idea.mm-fancy{flex:0 1 auto;max-width:100%;white-space:normal;line-height:1.45;text-align:left;min-height:52px}
.pv .pv-learn{margin:16px 0 0;font:500 14px/1.5 var(--sans)}
.pv .pv-learn a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pv .pv-pg-tog{display:flex;justify-content:center;margin:14px 0 0}
body.pv-darkpage .pv-cl-tog{background:rgba(242,226,200,.08);border-color:rgba(242,226,200,.35)}
body.pv-darkpage .pv-cl-tog button{color:#e2d5c0}
body.pv-darkpage .pv-cl-tog button.on{background:#f2e2c8;color:#2e2823}
@media (max-width:520px){.pv .mm-row.one1 .btn.mm-idea.mm-fancy{width:100%;justify-content:center;text-align:center}}
body.pv-darkpage .pv-close,body.pv-darkpage .pv-close img{background:transparent}
/* t1111u: the two one-of-one buttons stacked, same size; 'Learn more' = cream fill like the old Make it mine */
.pv .mm-row.one1 .btn.mm-idea{width:min(100%,460px);justify-content:space-between;text-align:left;white-space:normal;line-height:1.45;min-height:64px;padding-left:22px;padding-right:22px}
.pv .mm-row.one1-learn{margin-top:10px}
.pv .mm-row.one1 .btn.mm-idea.mm-learn{background:#f2e2c8;color:#2e2823;border:1.5px solid #f2e2c8;text-decoration:none;box-shadow:none}
.pv .mm-row.one1 .btn.mm-idea.mm-learn:hover{background:#f8ecd8}
@media (max-width:520px){.pv .mm-row.one1 .btn.mm-idea,.pv .mm-row.one1 .btn.mm-idea.mm-fancy{width:100%;font-size:12px;letter-spacing:.11em;justify-content:space-between;text-align:left;min-height:68px}}
.pv .pv-pairsub{margin:10px 0 0;font-size:11px;letter-spacing:.2em;opacity:.85}
/* t1110u: thumbnails on dark pages = the warm wall tone, not white tiles (garment unchanged: same contain fit, no crop / zoom) */
body.pv-darkpage .pv-th{background:linear-gradient(180deg,#6a5d50,#4c4239);border-color:rgba(242,226,200,.22);color:#e2d5c0}
body.pv-darkpage .pv-th.on{border-color:#f2e2c8}
body.pv-darkpage .pv-th img{background:transparent}
/* ===== end ONE OF ONE 1020 ===== */

/* ===== PAIR WRIST DETAIL 1020 (t1119u, SEED.pairWristDetail1020): teeny thumbs ABOVE the rod; a dark detail panel under the rod that crossfades with
   the jersey brought forward; placeholders until her wrist photos arrive (no crop / zoom of the jersey photos). ===== */
.pv-gal:has(.pv-thumbs-teeny){display:flex;flex-direction:column}
.pv-thumbs.pv-thumbs-teeny{order:-1;display:flex;gap:6px;margin:0 0 8px;grid-template-columns:none}
.pv-thumbs-teeny .pv-th{width:52px;flex:none;padding:3px;gap:1px;font-size:6.5px;letter-spacing:.08em;border-radius:3px}
.pv-thumbs-teeny .pv-th > span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-th-wdf{position:relative;display:block;aspect-ratio:1;width:100%}
.pv-th-wdf .pv-wd .pv-wd-ph span{display:none}
.pv-th-wdf .pv-wd .pv-wd-ph b{font-size:7px}
.pv-wd{position:absolute;inset:0;opacity:0;transition:opacity .45s ease;display:block}
[data-wi="0"] .pv-wd:nth-child(1),[data-wi="1"] .pv-wd:nth-child(2){opacity:1}
.pv-wd img{width:100%;height:100%;object-fit:contain;display:block}
.pv-wd-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:14px;
  background:linear-gradient(180deg,var(--dt-ph0,#6a5d50),var(--dt-ph1,#463d35));border:1px dashed rgba(242,226,200,.4);color:#eadcc5;border-radius:3px}
.pv-wd-ph b{font:700 13px/1 var(--mono);letter-spacing:.2em}
.pv-wd-ph span{font:500 13px/1.4 var(--sans);opacity:.9;max-width:26ch}
.pv-wrist{margin:6px auto 0;width:min(100%,420px)}
.pv-wrist-k{margin:0 0 8px;text-align:center;font-size:10px;letter-spacing:.22em;color:#e2d5c0}
.pv-wrist-f{position:relative;aspect-ratio:4/3;border-radius:4px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25)}
@media (prefers-reduced-motion:reduce){.pv-wd{transition:none}}
/* ===== end PAIR WRIST DETAIL 1020 ===== */

/* ===== PAIR ROPE U 1020 (t1127u, SEED.pairRopeU1020): the rod's ropes run up to the top of the section. The bar = the locked asset, unchanged;
   the extra rope length = the asset's OWN rope rows (150-300, uniform) stretched; its top cap is drawn from the asset's own rows 0-60. ===== */
/* t1168u: rope / thumbnail / bar placement moved to the shared ROD LAYOUT RULE 1020 (/rod-layout-1020.js, .rodu-* classes) */
.pv-uthumbs{display:flex;gap:6px}
.pv-uthumbs .pv-th{width:70px;flex:none;padding:3px;gap:1px;font-size:6.5px;letter-spacing:.08em;border-radius:3px;box-shadow:none}
.pv-uthumbs .pv-th > span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-uthumbs .pv-th img{aspect-ratio:1;object-fit:contain;width:100%}
@media (max-width:800px){.pv-uthumbs .pv-th{width:46px}}
/* t1133u: muted (faded + duller), no outlines; hover / the jersey
   that's forward = full strength (opacity only, no ring) */
/* t1147u: plain 50% opacity (no saturation/brightness tweak) */
/* t1163u: plus saturate(.7) */
body.pv-darkpage .pv-uthumbs .pv-th,.pv-uthumbs .pv-th{border:0;outline:0;box-shadow:none;background:rgba(242,226,200,.045);opacity:.5;filter:saturate(.7);transition:opacity .25s,filter .25s}
body.pv-darkpage .pv-uthumbs .pv-th.on,.pv-uthumbs .pv-th.on,.pv-uthumbs .pv-th:hover,.pv-uthumbs .pv-th:focus-visible{opacity:1;filter:none}
.pv-uthumbs .pv-th:focus-visible{outline:1px dotted rgba(242,226,200,.5);outline-offset:2px}
.pv-uthumbs .pv-wd-ph{border:0}
/* ===== end PAIR ROPE U 1020 ===== */

/* ===== ELITE BACKDROP 1020 (Jordi t1177u–t1181u, SEED.eliteBackdrop1020, PREVIEW; app.js eliteBdSet/eliteBdTone). The dressing-room roster project page's
   lit studio backdrop (dressing-room-photo.css .pj-bg / .pj-stage::before), in each elite page's own tone (--dt-*): a big soft light pool behind the rod,
   a subtler off-angle wash from the upper right, darker falloff corners, all seamless; below the piece it brightens and fades to the site white
   between --dt-a and --dt-b. Text in the white part flips cream -> dark (.dt-lt). Static, nothing animates. ===== */
html.elite-bd.pv-darkpage{background:#f8f7f4}
body.pv-darkpage.elite-bd{background:
  radial-gradient(ellipse 760px 560px at 27% 330px,rgba(var(--dt-wash,255,240,215),calc(.16 * var(--dt-lk,1))),rgba(var(--dt-wash,255,240,215),calc(.05 * var(--dt-lk,1))) 55%,transparent 80%),
  radial-gradient(ellipse 620px 440px at 84% 90px,rgba(var(--dt-wash,255,240,215),calc(.07 * var(--dt-lk2,var(--dt-lk,1)))),rgba(var(--dt-wash,255,240,215),calc(.02 * var(--dt-lk2,var(--dt-lk,1)))) 55%,transparent 80%),
  radial-gradient(ellipse 85% 780px at 34% 360px,transparent 50%,rgba(0,0,0,calc(.17 * var(--dt-vg,1))) 76%,rgba(0,0,0,calc(.11 * var(--dt-vg,1))) 90%,transparent 100%),
  linear-gradient(180deg,var(--dt-0,#625649) 0px,var(--dt-1,#574c41) 420px,var(--dt-3,#3a332d) calc(var(--dt-a,1200px) - 260px),color-mix(in srgb,var(--dt-3,#3a332d),var(--dt-mid,#9a8f83) 12%) var(--dt-a,1200px),color-mix(in srgb,var(--dt-3,#3a332d),var(--dt-mid,#9a8f83) 48%) calc(var(--dt-a,1200px) * .75 + var(--dt-b,2100px) * .25),var(--dt-mid,#9a8f83) calc((var(--dt-a,1200px) + var(--dt-b,2100px)) / 2),color-mix(in srgb,var(--dt-mid,#9a8f83),#f8f7f4 62%) calc(var(--dt-a,1200px) * .25 + var(--dt-b,2100px) * .75),color-mix(in srgb,var(--dt-mid,#9a8f83),#f8f7f4 92%) calc(var(--dt-a,1200px) * .08 + var(--dt-b,2100px) * .92),#f8f7f4 var(--dt-b,2100px),#f8f7f4 100%);
  background-color:#f8f7f4}
@media (max-width:760px){body.pv-darkpage.elite-bd{background:
  radial-gradient(ellipse 420px 420px at 50% 300px,rgba(var(--dt-wash,255,240,215),calc(.16 * var(--dt-lk,1))),rgba(var(--dt-wash,255,240,215),calc(.05 * var(--dt-lk,1))) 55%,transparent 80%),
  radial-gradient(ellipse 300px 260px at 92% 60px,rgba(var(--dt-wash,255,240,215),calc(.06 * var(--dt-lk2,var(--dt-lk,1)))),transparent 78%),
  radial-gradient(ellipse 120% 640px at 50% 320px,transparent 50%,rgba(0,0,0,calc(.15 * var(--dt-vg,1))) 76%,rgba(0,0,0,calc(.09 * var(--dt-vg,1))) 90%,transparent 100%),
  linear-gradient(180deg,var(--dt-0,#625649) 0px,var(--dt-1,#574c41) 420px,var(--dt-3,#3a332d) calc(var(--dt-a,1200px) - 260px),color-mix(in srgb,var(--dt-3,#3a332d),var(--dt-mid,#9a8f83) 12%) var(--dt-a,1200px),color-mix(in srgb,var(--dt-3,#3a332d),var(--dt-mid,#9a8f83) 48%) calc(var(--dt-a,1200px) * .75 + var(--dt-b,2100px) * .25),var(--dt-mid,#9a8f83) calc((var(--dt-a,1200px) + var(--dt-b,2100px)) / 2),color-mix(in srgb,var(--dt-mid,#9a8f83),#f8f7f4 62%) calc(var(--dt-a,1200px) * .25 + var(--dt-b,2100px) * .75),color-mix(in srgb,var(--dt-mid,#9a8f83),#f8f7f4 92%) calc(var(--dt-a,1200px) * .08 + var(--dt-b,2100px) * .92),#f8f7f4 var(--dt-b,2100px),#f8f7f4 100%);
  background-color:#f8f7f4}}
body.pv-darkpage.elite-bd .ebd-space{display:block}
/* the light behind the rod = the roster project page's stage light (dressing-room-photo.css .pj-stage::before, t1181u), unless a tone sets its own */
body.pv-darkpage.elite-bd .pv-stage::before{left:var(--dt-glow-x,-24%);right:var(--dt-glow-x,-24%);top:var(--dt-glow-t,-40%);height:var(--dt-glow-h,145%);
  background:var(--dt-glow,radial-gradient(ellipse 44% 40% at 50% 33%,rgba(var(--dt-wash,255,240,215),calc(.15 * var(--dt-lk,1))),rgba(var(--dt-wash,255,240,215),calc(.055 * var(--dt-lk,1))) 52%,transparent 80%))}
/* the light part: the white page's own colours again */
body.pv-darkpage.elite-bd .dt-lt{--paper:#f3f1ed;--paper2:#ebe8e3;--wall:#d9d6d1;--line:#d8d4cd;--ink:#1b1b1b;--ink2:#55534f;--mute:#8d8a84;color:#1b1b1b}
body.pv-darkpage.elite-bd .dt-lt .p2-vd{color:#55534f}
body.pv-darkpage.elite-bd .pathbar.dt-lt{border-top-color:#d8d4cd}
@media (prefers-reduced-motion:no-preference){body.pv-darkpage.elite-bd main > section > *,body.pv-darkpage.elite-bd .pathbar,body.pv-darkpage.elite-bd footer{transition:color .5s ease}}
/* ===== end ELITE BACKDROP 1020 ===== */

/* HIDE PO+CHAT MOBILE 1020 (Jordi t1189u-t1191u): on phones collapse the "Need something for playoffs" note + Jordi chat bubble on the rack. Desktop unchanged. Remove this block to bring it back. */
@media (max-width: 760px){ .wr .wr-po, .wr .wr-chat{ display:none !important; } .hero-rack > .wr{ height:340px !important; } .hero-rack > .wr .wr-floor{ display:none !important; } }
/* HANG SCALE 1020 (Jordi t1211u): a piece whose photo carries extra transparent padding (e.g. the Indy 500 pair) can be scaled up on the rod
   (it.hangScale → --oh-scale) so it reads the same size as the others. Grows from the collar, so the hook still touches (pvHangFit re-measures). */
.pv-gal .oh-g{scale:var(--oh-scale,1);transform-origin:50% 3%}

/* ===== HOOK SEAT RULE 1020 (t1225u, /rod-layout-1020.js): the desktop hero's rail is part of her photo, so this invisible line marks where the
   photo's black rail is (measured: top at 27.01% of the 1525px-tall photo, ~0.72% thick) so the shared rule can seat the hooks on it. ===== */
.jh-crop>.jh-rod{position:absolute;left:0;right:0;top:calc((.2701 - var(--y0)) / var(--h0) * 100%);height:calc(.0072 / var(--h0) * 100%);opacity:0;pointer-events:none}

/* RUSHED YELLOW 1020 (Jordi approved, Oct 20 2026): the Rushed timeline tag is baby yellow, never red: its icon line is baby yellow and its word stays
   black like Standard; Urgent stays red; Standard unchanged. Covers the timeline question tiles (both boards), the board tag pin, and the timeline note. */
.cb19.cb19.cb19.cb19 .htitem.rushed .htname,.b3.b3.b3.b3 .htitem.rushed .htname,.b3.b3.b3.b3 .b3-tagpin.rushed .htname{color:var(--cb-ink,#2D2B29)!important}
.cb19.cb19.cb19.cb19 .htitem.rushed .htic,.b3.b3.b3.b3 .htitem.rushed .htic,.b3.b3.b3.b3 .b3-tagpin.rushed .htic,.cb19.cb19.cb19.cb19 .pin.htpin.tlp-1 .htic{color:#E6CF4F!important}
.b3.b3.b3.b3 .b3-tagpin.rushed{background:#fffbe0}
.cb19.cb19.cb19 .tlmsg.rush.rushed{border-left-color:#E6CF4F}
/* end RUSHED YELLOW 1020 */

/* ORDER BOARD 1020 (Jordi t1361u-t1363u): icon-led likes explanation + design 'what’s this? ⌄' examples arrow. Icons = the board's own heart / ✓ chips. */
.cb19.cb19 .cb-help1020{display:flex;flex-direction:column;align-items:center;gap:8px;margin:2px 0 18px;}
.cb19.cb19 .cbh-row{display:flex;align-items:center;gap:10px;font-family:'DM Serif Display',serif;font-size:17px;line-height:1.2;color:var(--cb-ink);}
.cb19.cb19 .cbh-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:26px;padding:0 10px;border-radius:20px;border:1px solid var(--cb-yellow2);background:var(--cb-yellow);font-size:14px;line-height:1;}
.cb19.cb19 .cbh-ic .lic{width:15px;height:14px;}
.cb19.cb19 .cbh-ic .lic path{fill:var(--cb-red);stroke:var(--cb-red);}
.cb19.cb19 .cbh-ic.chk{background:var(--cb-blue);border-color:var(--cb-blue2);font-family:'Barlow',sans-serif;font-weight:700;color:var(--cb-ink);}
.cb19.cb19 .cbh-more{font-size:12.5px;font-style:italic;color:var(--cb-light);margin-top:2px;}
.cb19.cb19 .opt .od-more{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:2px 0;background:none;border:none;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--cb-mid);text-decoration:underline;text-underline-offset:2px;}
.cb19.cb19 .opt .od-more span{font-size:13px;line-height:1;text-decoration:none;display:inline-block;transform:translateY(-2px);}
.cb19.cb19 .opt .od-more:hover{color:var(--cb-ink);}
@media (max-width:640px){.cb19.cb19 .cbh-row{font-size:15px;gap:8px;}.cb19.cb19 .cb-help1020{align-items:flex-start;}}
/* TAGS EQUAL 1020 (Jordi approved 9:44 PM): Standard / Rushed / Urgent hang tags all ONE size (= the largest), question tiles + board pins,
   desktop + mobile. Colours, icons and words untouched. Remove this block to undo. */
.cb19.cb19.cb19.cb19 .htrow{align-items:stretch}
.cb19.cb19.cb19.cb19 .htrow > .htitem{flex:1 1 0;min-width:92px;max-width:132px}
.cb19.cb19.cb19.cb19 .htrow > .htitem > .htbody,.cb19.cb19.cb19.cb19 .pin.htpin > .htbody{flex:1 1 auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}

/* BOARD MASONRY 1020 (SEED.boardMasonry1020): order board step-05 ideas grid only (.cb19 #pgrid). The site-wide .pgrid{display:grid} (shop polaroids)
   made the board's tiles stretch to the tallest in each row. Here: CSS columns, same 2 across as before (phone + desktop), each card its own height. */
.cb19.cb19.cb19.cb-mas1020 #pgrid.pgrid{display:block;column-count:2;column-gap:12px;row-gap:0;padding:0;grid-template-columns:none}
.cb19.cb19.cb19.cb-mas1020 #pgrid.pgrid > .ptile{display:block;break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 12px;height:auto;align-self:auto}
.cb19.cb19.cb19.cb-mas1020 #pgrid.pgrid > .ptile-add{break-inside:avoid;margin:0 0 12px}
.cb19.cb19.cb19.cb-mas1020 #pgrid .ptile-img img{height:auto;aspect-ratio:auto;object-fit:contain}

/* ICON SWAP 1020 (SEED.boardIconSwap1020): step-05 legend row = the original small grey mono row, plain outline icons, · between; heart/bookmark inline icons in labels */
.cb19.cb19.cb19 .cb-swaplegend{align-items:center;gap:8px}
.cb19.cb19.cb19 .cb-swaplegend .pg-dot{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--cb-light)}
.cb19.cb19.cb19 .cb-swaplegend .pg-leg b{display:inline-flex;align-items:center}
.cb19.cb19.cb19 .cb-swaplegend .lic{width:13px;height:12px}
.cb19.cb19.cb19 .cb-swapic{display:inline-flex;vertical-align:-1px}
.cb19.cb19.cb19 .cb-swapic .lic{width:11px;height:10px}
.cb19.cb19.cb19 .pt-act.chk .lic{width:15px;height:14px}
.cb19.cb19.cb19 .pt-act.chk.on .lic path{fill:var(--cb-red);stroke:var(--cb-red)}

/* BOARD HALF 1020 (SEED.boardHalf1020, desktop only): questionnaire (white cards) and order board exactly the same width, 20px apart,
   the pair centred with equal side margins (same 1440 max + page padding as the site .wrap). Overrides BOARD WIDE 1020's columns. */
@media(min-width:861px){
  .cb19.cb19.cb19.cb19.cb-half1020 .shell{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:20px;max-width:1440px;margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad);box-sizing:border-box}
  .cb19.cb19.cb19.cb19.cb-half1020 .feed{padding-left:0;padding-right:0;align-items:stretch}
  .cb19.cb19.cb19.cb19.cb-half1020 .fcard{max-width:none}
  .cb19.cb19.cb19.cb19.cb-half1020 .qr{min-width:0}
}

/* SHOP HEADER TIDY 1021 · publish (Oct 21 2:05 PM): the phone /shop header used to get its desktop-style arrangement from the mobile mirror preview
   (preview/unison-1020.css, SEED.mobileMirror1020, NOT published). These are those same /shop rules, copied here under .tw-tidy21 so the approved
   phone header (v7b/v8) works on its own, with or without the mirror. */
@media (max-width:760px){
  .tw-hi4.tw-tidy21 .tw-top{grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center;padding-right:0}
  .tw-hi4.tw-tidy21 .tw-top .tw-big{grid-column:1;grid-row:1 / 3;align-self:center}
  .tw-hi4.tw-tidy21 .tw-top .tw-hi-h{grid-column:2;grid-row:1;font-size:23px;line-height:1.08;padding-right:64px;margin:0 0 4px}
  .tw-hi4.tw-tidy21 .tw-top .tw-h{grid-column:2;grid-row:2;font-size:17px;line-height:1.1;align-self:start}
  .tw-hi4.tw-tidy21 .tw-top .fs20{top:0}
  .tw-hi4.tw-tidy21 .tw-in .tw-cards p{display:block!important;font-size:10.5px;line-height:1.35;margin:4px 0 0}
  .tw-hi4.tw-tidy21 .tw-in .tw-cards li:last-child p{display:inline-block!important}
}
/* SHOP HEADER TIDY 1021 (Jordi, Oct 21 1:24 PM; SEED.shopHeaderTidy1021 → .tw-tidy21). Remove this block (and the class in app.js) to undo.
   Both widths: the Or card's coloured top line meets the grey 03 line (its side gap becomes inner padding, so the card's text stays exactly where it was). */
.tw-tidy21 .tw-3s li:nth-child(4){margin-left:0!important;padding-left:calc(var(--u) * 67)!important}
@media(max-width:760px){
  .tw-tidy21 .tw-in .tw-3s li:nth-child(4){margin-left:0!important;padding-left:14px!important}
  /* phones: welcome title smaller (two balanced lines; one line would need ~13.7px beside the stack), its top on the top of the big 3's glyph;
     the 3 + title + 'Steps to create' block sits centred between the nav/back row and the coloured lines (equal space above and below) */
  html:root:root .tw.tw-hi4.tw-tidy21{padding-top:9.75px}
  html:root:root .tw-hi4.tw-tidy21 .tw-top{align-items:start;margin-bottom:22.25px}   /* measured ink: ~25px from the back arrow down to the block, ~25px from the block down to the coloured lines */
  html:root:root .tw-hi4.tw-tidy21 .tw-top .tw-big{align-self:start;margin-top:-27px}   /* the 3 is an old-style figure: its ink starts ~27px below its box; this puts its top on the title top */
  html:root:root .tw-hi4.tw-tidy21 .tw-top .tw-hi-h{font-size:18px;line-height:1.1;text-wrap:balance;margin:0 0 6px}
}
/* SHOP HEADER TIDY 1021 · v4 (Jordi's Photoshop mockup, Oct 21 1:35 PM): welcome in the 01 light blue, the 3 + 'Steps to create' in black (both widths);
   desktop: title block raised to her positions (3 −46, welcome −31, steps −43 px at 1440, scaling with width), cards + space down to the pills tightened (−45 px at 1440) */
.tw-tidy21 .tw-top .tw-hi-h{color:rgb(150, 194, 222)}
.tw-tidy21 .tw-top .tw-big,.tw-tidy21 .tw-top .tw-h,.tw-tidy21 .tw-top .tw-h *{color:#121212}
@media(min-width:761px){
  .tw-tidy21 .tw-top .tw-big{translate:0 calc(var(--u) * -32.7)}
  .tw-tidy21 .tw-top .tw-hi-h{translate:0 calc(var(--u) * -22)}
  .tw-tidy21 .tw-top .tw-h{translate:0 calc(var(--u) * -30.6)}
  .tw.tw-tidy21 .tw-cards li{padding-bottom:calc(var(--u) * 12)}
  .tw.tw-tidy21{padding-bottom:calc(var(--u) * 6.5)}
}
/* v4 phones: the same tightening down to the pills (section bottom 22 → 6px, the desktop ratio); the tidy title block stays as it was */
@media(max-width:760px){html:root:root .tw.tw-hi4.tw-tidy21{padding-bottom:6px}}
/* SHOP HEADER TIDY 1021 · v5 (Jordi, Oct 21 1:41 PM): both widths: the thin divider between the 03 and Or cards, like 01|02 and 02|03.
   Phones: mirror the desktop arrangement scaled down: the welcome on ONE line beside the 3 with 'Steps to create' under it, smaller card text and compact padding. */
@media(max-width:760px){
  html:root:root .tw.tw-hi4.tw-tidy21{padding-top:3px}
  html:root:root .tw-hi4.tw-tidy21 .tw-top{column-gap:9px;margin-bottom:29px}   /* block centred: equal space from the back arrow and to the coloured lines */
  html:root:root .tw-hi4.tw-tidy21 .tw-top .tw-big{font-size:var(--t5-big,84px);line-height:.82;margin-top:-23px}
  html:root:root .tw-hi4.tw-tidy21 .tw-top .tw-hi-h{font-size:var(--t5-hi,14px);line-height:1.1;white-space:nowrap;padding-right:0;margin:0 0 5px}
  html:root:root .tw-hi4.tw-tidy21 .tw-top .tw-h{font-size:12.5px;line-height:1.08}
  html:root:root .tw-hi4.tw-tidy21 .tw-in .tw-cards li{padding:9px 3px 5px 9px!important}
  html:root:root .tw-hi4.tw-tidy21 .tw-in .tw-cards li:nth-child(4){padding-left:12px!important}
  html:root:root .tw-hi4.tw-tidy21 .tw-in .tw-cards .tw-n{font-size:18px;line-height:1;margin-bottom:6px}
  html:root:root .tw-hi4.tw-tidy21 .tw-in .tw-cards h3{font-size:10px!important;line-height:1.15!important;margin:0 0 5px!important}
  html:root:root .tw-hi4.tw-tidy21 .tw-in .tw-cards p{font-size:9px!important;line-height:1.45!important;margin:0!important}
}
/* SHOP HEADER TIDY 1021 · v6 (Jordi, Oct 21 1:50 PM): the thin card dividers are drawn as a 1px inset line instead of a left border, so every colour bar
   above the cards (incl. the navy Or bar) is a clean straight rectangle, butt-joined with square ends (a border meeting the coloured top border was
   mitred into a slanted notch). Same grey (#e3e0da), now on 01|02, 02|03 and 03|Or, both widths. */
html:root:root .tw.tw-tidy21 .tw-cards.tw-3s li:nth-child(n+2){border-left:0!important;box-shadow:inset 1px 0 0 #e3e0da}
@media(max-width:760px){
  /* phones: a shorter back-arrow row so the title sits much closer under the nav; the block stays centred above the coloured lines */
  html:root:root .pgback:has(+ main .tw-tidy21){height:var(--t6-row,22px)}
  html:root:root .pgback:has(+ main .tw-tidy21) .pgbk{top:var(--t6-arrow,-5px)}
  html:root:root .tw.tw-hi4.tw-tidy21{padding-top:var(--t6-pt,4px)}
  html:root:root .tw-hi4.tw-tidy21 .tw-top{margin-bottom:var(--t6-mb,19px)}
}
/* SHOP HEADER TIDY 1021 · v7 (Jordi, Oct 21 1:56 PM), PHONES ONLY (desktop untouched):
   the back arrow moves out to the left margin (its row no longer takes height) so the title block (3 + welcome + steps) sits centred between the
   nav bar and the 01 colour line, the sweater stack stays where it was; the 4 cards run full bleed, edge to edge, in 4 exactly equal columns;
   the colour lines are 4px like desktop (dividers stay 1px like desktop). */
@media(max-width:760px){
  html:root:root .pgback:has(+ main .tw-tidy21){height:0}
  html:root:root .pgback:has(+ main .tw-tidy21) .pgbk{left:-6px;top:-5px}
  html:root:root .tw.tw-hi4.tw-tidy21{padding-top:var(--t7-pt,16.5px)}
  html:root:root .tw-hi4.tw-tidy21 .tw-top{margin-bottom:var(--t7-mb,28.5px)}
  html:root:root .tw-hi4.tw-tidy21 .tw-top .fs20{top:var(--t7-fs,9.5px)}
  html:root:root .tw-hi4.tw-tidy21 .tw-in .tw-cards{margin-left:-20px!important;margin-right:-20px!important;width:auto!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
  html:root:root .tw-hi4.tw-tidy21 .tw-in .tw-cards li{border-top-width:2px!important}   /* v7b (Jordi 2:01 PM): thinner, so it reads as thin as desktop on a phone */
}
/* SHOP HEADER TIDY 1021 · v8 (Jordi, Oct 21 2:02 PM): the Or card's 'Create a custom order →' text in the same font, weight, size and grey as the
   card subtext (Barlow 400, #5d5d5d), both widths; the navy underline is left as it was */
.tw-tidy21 .tw-cards.tw-3s li:nth-child(4) p,.tw-tidy21 .tw-cards.tw-3s li:nth-child(4) p::after{font-family:Barlow,system-ui,sans-serif!important;font-weight:400!important;color:rgb(93, 93, 93)!important;letter-spacing:normal!important}
/* SHOP HEADER TIDY 1021 · v9 (Jordi, Oct 21 2:13 PM; not pushed): the Or card link gets a regular thin underline instead of the thick navy one:
   1px, the link's own grey, 3px offset, under the whole text (the arrow sits after it, not underlined), both widths */
.tw-tidy21 .tw-cards.tw-3s li:nth-child(4) p{text-decoration:underline!important;text-decoration-color:rgb(93, 93, 93)!important;text-decoration-thickness:1px!important;text-underline-offset:3px!important;text-decoration-skip-ink:none}
/* ===== KL NO JITTER 1021 (SEED.klNoJitter1021 -> .klh-loop.klh-still): Kids Lab box loop pieces sit perfectly still once in.
   1) .stk2 has transition:transform .25s, so a re-used slot swivelled/slid from the last round's angle to the new one WHILE the new piece popped in;
   2) .stk2:hover straightened + grew the piece under a resting mouse. Both off here; the pop in/out (.stk2-b) is untouched. ===== */
.klh-loop.klh-still .klh-stk{transition:none}
.klh-loop.klh-still .klh-stk:hover{transform:translate(-50%,-50%) rotate(var(--r))}
/* ===== end KL NO JITTER 1021 ===== */
/* ===== FOOTER STUDIO OF ONE 1021 (SEED.footerStudioOfOne1021): IG handle · A STUDIO OF ONE (nav-link style: Barlow Condensed 500, caps, .18em) · her quote
   (the footer's hand font, 22px as before) on the left; Contact + © on the right. Sizes/colours = the footer's existing ones. ===== */
footer.fs21 .wrap{justify-content:space-between;align-items:center;gap:12px 24px}
footer.fs21 .fs21-l{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 18px;font:500 11.5px/1.4 var(--mono);color:var(--mute)}
footer.fs21 .fs21-one{font:500 11.5px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:inherit;white-space:nowrap}
footer.fs21 .fs21-q{white-space:nowrap}
body.kl-page footer.fs21 .fs21-l{color:var(--klmute)}
@media (max-width:760px){footer.fs21 .fs21-l{flex-direction:column;align-items:flex-start;gap:4px}footer.fs21 .fs21-q{white-space:normal}}
/* ===== end FOOTER STUDIO OF ONE 1021 ===== */

/* ORDER BOARD 1021 (Jordi Oct 21, 2:31–2:33 PM): heading centred over the board; bigger event-date field; inline Save/Heart icons in the step-05 line */
.bh-sec .bh-in{text-align:center}
.bh-sec .bh-sub{margin-left:auto;margin-right:auto}
.cb19.cb19.cb19 input[type="date"].field-input{font-size:19px;min-height:52px;padding:12px 2px;box-sizing:border-box;cursor:pointer}
.cb19.cb19.cb19 input[type="date"].field-input::-webkit-calendar-picker-indicator{width:22px;height:22px;cursor:pointer}
@media (max-width:760px){
  .cb19.cb19.cb19 input[type="date"].field-input{font-size:18px;min-height:48px;padding:11px 2px}
}
.cb19.cb19.cb19 .cb-swaphint .cb-inic{display:inline-flex;vertical-align:middle;margin:0 .25em 0 0;position:relative;top:-.08em}
.cb19.cb19.cb19 .cb-swaphint .cb-inic .lic{width:1em;height:.92em}
/* MOBILE MENU OPAQUE 1021 (Jordi t1614u, SEED.mobileMenuOpaque1021): the open phone menu covers the whole page below the header. The homepage flying jacket (z 40),
   the Kids Lab stack pieces (z 46-53) and the /shop toss canvas (z 41) were painting over the menu (z 39). While it is open: main becomes its own layer under the menu,
   the toss canvas is hidden, the page behind can't scroll. The menu itself is unchanged. */
body.mmo1021:has(.menu.open){overflow:hidden}
body.mmo1021:has(.menu.open) main{isolation:isolate}
body.mmo1021:has(.menu.open) .ft20-over{visibility:hidden}
body.mmo1021 .menu.open{overscroll-behavior:contain}
/* KL INLINE GALLERY 1021 (SEED.klInlineGallery1021): a Kids Lab style square opens that style's shop gallery inline below the squares. The gallery itself uses the
   shop's own styles (.bmg / .coll / .ps-area); this only places it: scroll target under the nav + a short fade-in. */
.kl-gal1021[hidden]{display:none}
.kl-gal1021{scroll-margin-top:var(--hdrh,70px);padding-top:clamp(18px,3vw,40px);padding-bottom:clamp(24px,4vw,56px)}
.kl-gal1021.on{animation:klgal1021 .35s ease both}
@keyframes klgal1021{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.kl-gal1021.on{animation:none}}
/* KL INLINE SIMPLE HEAD 1021 (SEED.klInlineSimpleHead1021): Kids Lab inline gallery only: the style band is a plain white full-width divider, one column (title only).
   Font + size come from the shop band's own .sb-t rules (same classes). */
.kl-gal1021 .sb-band.kl-simple1021{background:#fff;--sb-bg:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kl-gal1021 .kl-simple1021 .sb-in{grid-template-columns:minmax(0,1fr)!important}
.kl-gal1021:has(.kl-simple1021){padding-top:0}.kl-gal1021 .sb-band.kl-simple1021{margin-top:0}
/* KL STUDIO MOCK 1021 (brainstorm, /kids-lab?klstudio=1 only): clean white studio layout for the inline Baby Mascots gallery. Existing fonts/colours only
   (nav font var(--mono) for labels, heading font var(--serif), ink/mute/line), no stickers, no animation. */
.kl-gal1021:has(.kls-mock){padding:0;animation:none}
.kls-mock{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(40px,5vw,72px) 0 clamp(56px,6vw,96px)}
.kls-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.kls-sec{margin-top:clamp(40px,4.5vw,64px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.kls-lbl{font:500 12.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin:0 0 18px}
.kls-h{font:italic 600 clamp(28px,3vw,42px)/1.1 var(--serif);letter-spacing:-.01em;color:var(--ink);margin:0}
.kls-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px) clamp(14px,1.8vw,28px)}
.kls-card{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink)}
.kls-img{display:block;aspect-ratio:1;background:#fff;border:1px solid var(--line);overflow:hidden}
.kls-img img{width:100%;height:100%;object-fit:contain;padding:8%;box-sizing:border-box}
.kls-name{font:400 14px/1.35 var(--sans);margin-top:6px}
.kls-price,.kls-price .loginest{font:500 12px/1.2 var(--mono);letter-spacing:.08em;color:var(--mute)}
.kls-filters{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:32px}
.kls-opts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px}
.kls-opts button{background:none;border:0;padding:4px 0;cursor:pointer;font:500 13.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);border-bottom:1.5px solid transparent}
.kls-opts button.on,.kls-opts button:hover{color:var(--ink);border-bottom-color:var(--ink)}
.kls-mock .cdrop-w{margin:0}
@media (max-width:760px){.kls-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kls-filters{grid-template-columns:1fr;gap:28px}.kls-h{font-size:28px}}