/* ── hero artboard (scaled to fit) ── */
.hero-wrap{--aw:1300;--ah:660;--s:1;position:relative;margin-top:clamp(40px,9vw,120px);height:calc(var(--ah) * var(--s) * 1px)}
.art{--nx:300;--ny:89;--nw:695;--nh:176;--px:603;--py:80;--ps:334;
  position:absolute;left:50%;top:0;width:calc(var(--aw) * 1px);height:calc(var(--ah) * 1px);
  transform:translateX(-50%) scale(var(--s));transform-origin:50% 0}
@media(max-width:699px){
  .hero-wrap{--aw:520;--ah:880}
  .note{font-size:15px;padding:11px 18px}
  .art{--nx:2;--ny:161;--nw:516;--nh:146;--px:250;--py:150;--ps:240}
}
.ab{position:absolute;z-index:5;left:calc(var(--x) * 1px);top:calc(var(--y) * 1px);translate:-50% -50%}
@media(max-width:699px){.ab{left:calc(var(--mx) * 1px);top:calc(var(--my) * 1px)}}
.rot{rotate:var(--r,0deg)}
@media(max-width:699px){.rot{rotate:var(--mr,var(--r,0deg))}}
.drag{cursor:grab;touch-action:none;user-select:none}
.grabbing{cursor:grabbing;z-index:20;position:relative}

.myname{text-align:center;padding:4px 8px}
.myname span{font-family:var(--hand);font-size:31px;line-height:1}
.myname svg{display:block;width:96px;height:14px;margin:2px auto 0}
.myname path{stroke:var(--text);stroke-width:2;fill:none;stroke-linecap:round}

.note{color:#111;padding:13px 22px;font-size:17px;white-space:nowrap;letter-spacing:-.01em;box-shadow:0 2px 0 rgba(0,0,0,.05)}
.note-green{background:var(--mint)}
.note-cream{position:relative;background:var(--cream)}
.note-cream::before{content:"";position:absolute;left:8px;right:26px;bottom:-14px;height:32px;background:var(--navy);z-index:-1;rotate:-2.5deg}

.selbox{position:absolute;z-index:1;left:calc(var(--nx) * 1px);top:calc(var(--ny) * 1px);width:calc(var(--nw) * 1px);height:calc(var(--nh) * 1px);border:2px solid var(--cyan)}
.hd{position:absolute;width:13px;height:13px;background:var(--cyan);border:1.5px solid var(--ink)}
.hd.tl{top:-7px;left:-7px}.hd.tr{top:-7px;right:-7px}.hd.bl{bottom:-7px;left:-7px}.hd.br{bottom:-7px;right:-7px}
.name{position:absolute;z-index:2;left:calc(var(--nx) * 1px);top:calc(var(--ny) * 1px);width:calc(var(--nw) * 1px);height:calc(var(--nh) * 1px);
  display:flex;align-items:center;justify-content:center;font-family:var(--pixel);font-weight:700;font-size:150px;line-height:1;
  white-space:nowrap;letter-spacing:.01em;color:var(--text);font-size:174px}
@media(max-width:699px){.name{font-size:139px}}
.name .ch{display:inline-block;will-change:transform}
.name.inv{z-index:4;color:var(--boxt);pointer-events:none}
.photo{position:absolute;z-index:3;left:calc(var(--px) * 1px);top:calc(var(--py) * 1px);width:calc(var(--ps) * 1px);height:calc(var(--ps) * 1px);
  background:var(--box);pointer-events:none}
.photo{opacity:0;transform:scale(.96);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.9,.3,1.25)}
.name.inv,#availInv{opacity:0;transition:opacity .3s ease}
.art.boxon .photo{opacity:1;transform:none}
.art.boxon .name.inv,.art.boxon #availInv{opacity:1}
.photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 25%;filter:grayscale(1) brightness(.5) contrast(1.15)}
.art .name.inv,.art #availInv{color:#fff}
.tile.tphoto{overflow:hidden}
.tile.tphoto img{width:100%;height:100%;object-fit:cover}
.comment .cav{overflow:hidden}
.comment .cav img{width:100%;height:100%;object-fit:cover}
.pimg img{object-position:center 20%}
.photo .ol{position:absolute;left:0;right:0;height:2px;background:var(--orange)}
.photo .o1{top:calc((var(--ny) - var(--py)) * 1px)}
.photo .o2{top:calc((var(--ny) + var(--nh) - var(--py)) * 1px - 2px)}
.bh{position:absolute;width:12px;height:12px;background:var(--box)}
.bh.tl{top:-6px;left:-6px}.bh.tr{top:-6px;right:-6px}.bh.bl{bottom:-6px;left:-6px}.bh.br{bottom:-6px;right:-6px}

#avail{z-index:5}
.av{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:15px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:var(--text)}
.av .d{width:13px;height:13px;border-radius:50%;background:var(--cyan);flex:none}
.av.inv{position:absolute;inset:0;color:var(--boxt)}

.bub{width:58px;height:58px;border-radius:50% 50% 50% 6px;background:#BDE9F7;border:3px solid #BDE9F7;display:grid;place-items:center;
  font-family:var(--mono);font-weight:700;font-size:14px;color:#0B3B4B;overflow:hidden}
.bub img{width:100%;height:100%;object-fit:cover;border-radius:inherit}

.pill{display:inline-block;border:2px solid var(--ink);border-radius:999px;padding:13px 26px;font-family:var(--mono);font-size:15px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.pill-y{background:var(--yellow);color:var(--ink)}
.pill-p{background:var(--pink);color:#fff}
.pill-c{background:var(--cyan);color:var(--ink)}
.pill-g{background:var(--green);color:var(--ink)}
.pin{position:relative}
.arrow{position:absolute;width:30px;height:30px}
.arrow.ay{right:-46px;top:2px;rotate:-12deg}
.arrow.ap{left:-30px;top:-34px}
.ytag{position:absolute;left:26px;top:-30px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:12px;font-weight:700;
  padding:2px 9px;border-radius:999px;border-top:4px solid var(--green)}

.statement{font-size:46px;line-height:1.08;letter-spacing:-.045em;text-align:center;white-space:nowrap;color:var(--text)}
@media(max-width:699px){.statement{font-size:40px}}
.statement .ic{display:inline-block;width:.85em;height:.85em;vertical-align:-.08em;margin:0 .04em}
.cta{display:inline-flex;align-items:center;gap:12px;background:var(--text);color:var(--paper);padding:8px 16px 8px 8px;font-family:var(--mono);font-weight:700;
  font-size:15px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.cta .ico{width:42px;height:42px;background:var(--cyan);border:2px solid var(--pink);display:grid;place-items:center}
.cta .ico svg{width:22px;height:22px}