/* Sold at B&H (#sold), 2026-10-15. Every piece gets its moment on the block; the hammer falls on its real price.
   Spec: _sold-lab/SPEC.md (+ KYLE OVERRIDE, + the final polish notes in NOTES.md). Motion is WAAPI in sold.js on transform and
   opacity only. No filters, blends or shadows that move; will-change only while the card is near the viewport (.is-near). */
.sold-section{background:#fff}
.sold-green{color:var(--green)}
.sold-section .section-heading p{max-width:62ch}
.sold-section .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the stage card ---------- */
.sold-card{position:relative;display:grid;grid-template-columns:7fr 5fr;height:560px;background:#fff;border:1px solid var(--line);border-radius:28px;
  box-shadow:0 30px 70px #0b1f3b14,0 2px 0 #fff inset}
.sold-room{position:relative;margin:12px 0 12px 12px;border-radius:20px;overflow:hidden;background:#fff;container-type:size;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.sold-room:active{cursor:grabbing}
.sold-slide{position:absolute;inset:0;opacity:0;pointer-events:none}
.sold-slide.is-on{opacity:1}
/* KYLE OVERRIDE: no plinth, floor or shadow. Each piece is centered on plain white, never wider than its own pixels.
   --f is the piece's presence (a padlock is not a secretary); it scales both the width and the height cap. */
.sold-piece{position:absolute;left:calc(50% - var(--pw) / 2);top:calc(50% - var(--pw) / var(--ar) / 2);width:var(--pw);aspect-ratio:var(--ar);overflow:hidden;background:#fff}
.sold-piece img{position:absolute;max-width:none;height:auto;width:calc(100% / var(--bw));left:calc(-100% * var(--bx) / var(--bw));top:calc(-100% * var(--by) / var(--bh));object-fit:fill;pointer-events:none;-webkit-user-drag:none}
.m-object{--pw:min(calc(80cqw * var(--f)),calc(84 * var(--f) * var(--ar) * 1cqh),calc(var(--cw) * 1px))}
.m-photo{--pw:min(82cqw,calc(76 * var(--ar) * 1cqh),calc(var(--cw) * 1px))}
.m-photo .sold-piece{border-radius:14px}
.sold-hint{position:absolute;left:50%;bottom:10px;margin:0;padding:6px 12px;border-radius:20px;background:#fffffff0;box-shadow:0 0 0 1px var(--line);font-size:12px;font-weight:650;color:var(--deep);white-space:nowrap;
  transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .4s var(--soft)}
.sold-hint.is-on{opacity:1}

/* ---------- the label ---------- */
.sold-label{--tf:clamp(28px,2.5vw,34px);--pf:clamp(64px,6.2vw,96px);--sf:clamp(20px,1.75vw,25px);--sw:132px;--sh:62px;--sx:.5;--sy:-.5;
  position:relative;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:40px 48px}
/* meta + title share a box sized for two title lines; one-line titles sit at its foot, next to the call, never with a hole under them */
.sold-head{display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(27px + 2.24 * var(--tf))}
.sold-meta{margin:0 0 10px;font-size:13px;line-height:17px;font-weight:650;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.sold-title{margin:0;font-size:var(--tf);line-height:1.12;font-weight:650;letter-spacing:-1px;color:var(--ink);text-wrap:balance}
.sold-fig{position:relative;align-self:flex-start;width:max-content;max-width:100%;margin-top:30px}
/* the call: one line of type that the auctioneer's words pass through, and that comes to rest on "Sold for" */
.sold-say{display:grid;margin:0 0 6px;font-size:var(--sf);line-height:1.2;font-weight:700;letter-spacing:-.4px;white-space:nowrap}
.sold-say>span{grid-area:1/1}
.sold-say .s1,.sold-say .s2{color:var(--blue-ink);opacity:0}   /* blue-ink, not --blue: readable in the moment it is on screen */
.sold-say .s3{color:var(--green)}
.sold-price{position:relative;margin:0;font-family:var(--num);font-weight:700;font-size:var(--pf);line-height:1;color:var(--deep);white-space:nowrap}
.sold-digits{-webkit-user-select:none;user-select:none;display:inline-flex;align-items:flex-start}
.sold-digits .cur{font-size:.55em;margin:.09em .05em 0 0;color:var(--green)}
.sold-digits .dg{display:inline-block;height:1em;margin-right:-.025em;overflow:hidden;clip-path:inset(0)}   /* clip-path: WebKit leaked the next row at fractional sizes */
.sold-digits .st{display:block;white-space:pre;line-height:1;text-align:center;margin:0 -.1em}
.sold-digits .cm{margin-right:-.025em}
.sold-digits .is-off{display:none}
.sold-rule{display:block;width:100%;height:3px;margin-top:14px;border-radius:3px;background:var(--green);transform-origin:0 50%}
/* the stamp: flat ink struck across the price's top corner. No shadow, no fill: ink, not a sticker */
.sold-stamp{position:absolute;left:max(calc(100% - var(--sw) * var(--sx)),calc(var(--sf) * 4.2 + 10px));top:calc(var(--sh) * var(--sy));width:var(--sw);height:var(--sh);pointer-events:none}
.sold-stamp span{position:absolute;inset:0;display:grid;place-items:center;border:6px double var(--green);border-radius:7px;color:var(--green);opacity:.9;
  font-family:var(--num);font-size:calc(var(--sh) * .42);font-weight:700;letter-spacing:.22em;text-indent:.22em;line-height:1;transform:rotate(-6deg)}
.sold-ctrl{display:none;align-items:center;gap:10px;margin-top:30px}
.sold-section.is-live .sold-ctrl{display:flex}
.sold-btn{flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid #D9DCE6;background:#fff;color:var(--deep);cursor:pointer;transition:transform .6s var(--spring),background-color .3s var(--soft),border-color .3s var(--soft)}
.sold-btn svg{width:20px;height:20px}
.sold-play{width:52px;height:52px;border:0;background:var(--deep);color:#fff}
.sold-play .ic-play,.sold-card.is-paused .sold-play .ic-pause{display:none}
.sold-card.is-paused .sold-play .ic-play{display:inline}
.sold-prog{position:relative;flex:1 1 auto;min-width:40px;height:3px;margin-left:6px;border-radius:3px;background:#26226224;overflow:hidden}
.sold-prog i{position:absolute;inset:0;background:var(--deep);transform-origin:0 50%;transform:scaleX(0)}
@media (hover:hover) and (pointer:fine){
  .sold-btn:hover{background:var(--pale);border-color:var(--deep);transform:scale(1.06)}
  .sold-play:hover{background:var(--blue)}
}
.sold-btn:focus-visible{background:var(--pale);border-color:var(--deep)}
.sold-play:focus-visible{background:var(--blue)}
.sold-btn:active{transform:scale(.94);transition-duration:.15s}

/* layers for the sale exist only while the card is near the viewport, so a sale never creates and destroys them */
.sold-card.is-near .sold-slide,.sold-card.is-near .sold-head,.sold-card.is-near .sold-meta,.sold-card.is-near .sold-title,.sold-card.is-near .sold-fig,.sold-card.is-near .sold-digits,.sold-card.is-near .sold-digits .st,
.sold-card.is-near .sold-say>span,.sold-card.is-near .sold-stamp,.sold-card.is-near .sold-rule,.sold-card.is-near [data-prog]{will-change:transform,opacity}
/* the card itself is the boundary: its sale animations never make the page below assume overlap and promote layers */
.sold-card.is-near{will-change:transform}

/* "ready": before the first sale the price waits unshown (the sale starts at 55% in view) */
.sold-card[data-state="ready"] .sold-stamp,.sold-card[data-state="ready"] .sold-digits,.sold-card[data-state="ready"] .sold-say .s3{opacity:0}
.sold-card[data-state="ready"] .sold-rule{transform:scaleX(0)}

/* ---------- the price chart ---------- */
.sold-sky-wrap{position:relative;margin-top:36px}
.sold-sky-cap{display:flex;justify-content:space-between;gap:16px;margin-bottom:8px;font-size:12px;font-weight:650;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted)}
.sold-sky{display:flex;align-items:stretch;gap:4px;height:96px;padding:20px 0 10px;border-bottom:1px solid var(--line);touch-action:pan-y}
.sold-bar{position:relative;flex:1 1 0;min-width:0;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:flex-end;border-radius:3px 3px 0 0}
.sold-bar i{display:block;width:100%;height:max(5px,calc(var(--h) * 100%));border-radius:3px 3px 0 0;background:#D5D9E6;transition:background-color .3s var(--soft)}
.sold-bar.is-cur i{background:var(--green)}
.sold-bar-v{position:absolute;left:0;bottom:calc(var(--h) * 100% + 4px);font-family:var(--num);font-size:12px;font-weight:700;color:var(--deep);white-space:nowrap;pointer-events:none}
.sold-bar-v.is-end{left:auto;right:0}
.sold-bar:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.sold-bar:hover i{background:var(--blue)}}
.sold-tip{position:absolute;left:0;bottom:calc(100% - 30px);display:flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;border-radius:14px;background:var(--deep);color:#fff;white-space:nowrap;pointer-events:none;z-index:3;
  opacity:0;transform:translateX(var(--x,0px)) translateY(6px);transition:opacity .2s var(--soft),transform .3s var(--out)}
.sold-tip.is-on{opacity:1;transform:translateX(var(--x,0px))}
.sold-tip .sold-th{width:40px;height:40px;border-radius:9px;background:#fff}
.sold-tip span{display:flex;flex-direction:column}
.sold-tip b{font-size:13px;font-weight:650}
.sold-tip small{font-family:var(--num);font-size:14px;font-weight:600;color:#BFE3C9}

/* ---------- every result: highest to lowest, read down the columns ---------- */
.sold-results{--cols:3;--rows:11;margin-top:30px}
.sold-list-head,.sold-list{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:40px}
.sold-list-head>span{display:flex;justify-content:space-between;padding:0 4px 8px;border-bottom:1px solid var(--line);font-size:11.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted)}
.sold-list-head>span>span:last-child{color:var(--green)}
.sold-list{list-style:none;margin:0;padding:0;grid-auto-flow:column;grid-template-rows:repeat(var(--rows),auto)}
.sold-list li{border-bottom:1px solid var(--line)}
.sold-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:10px 4px;border:0;border-radius:10px;background:none;text-align:left;cursor:pointer;transition:background-color .3s var(--soft)}
.sold-th{display:block;background:#fff}
.sold-row .sold-th{width:40px;height:40px;border-radius:8px;box-shadow:0 0 0 1px var(--line)}
.sold-row-t{font-size:14.5px;font-weight:600;line-height:1.3;color:var(--ink);text-wrap:balance}
.sold-row-p{font-family:var(--num);font-size:17px;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}
.sold-row[aria-current="true"]{background:var(--pale)}
@media (hover:hover) and (pointer:fine){.sold-row:hover{background:#F3F7FB}}
.sold-row:focus-visible{background:#F3F7FB;outline-offset:2px}
.sold-more{display:none;margin:22px auto 0;align-items:center;gap:10px;height:46px;padding:0 22px;border-radius:30px;border:1px solid #D6DAE3;background:#fff;font-size:14px;font-weight:650;color:var(--deep);cursor:pointer;transition:border-color .3s var(--soft),transform .6s var(--spring)}
.sold-more::after{content:'';width:7px;height:7px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .5s var(--spring)}
.sold-more[aria-expanded="true"]::after{transform:translateY(2px) rotate(225deg)}
@media (hover:hover) and (pointer:fine){.sold-more:hover{border-color:var(--deep)}}
.sold-section.is-live .sold-more{display:flex}
.sold-section.is-live .sold-results:not(.is-all){--rows:3}
.sold-section.is-live .sold-results:not(.is-all) li:nth-child(n+10){display:none}

/* ---------- the property and the ask ---------- */
.sold-property{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:48px;align-items:center;margin-top:64px;padding:24px;border:1px solid var(--line);border-radius:28px;background:#fff}
.sold-prop-img{margin:0}
.sold-prop-img img{display:block;width:100%;height:auto;aspect-ratio:1024/568;border-radius:14px}
.sold-prop-img figcaption{margin-top:10px;font-size:12.5px;color:var(--muted)}
.sold-prop-copy .section-pill{margin-bottom:14px}
.sold-prop-copy h3{margin:0;font-size:30px;line-height:1.12;letter-spacing:-1px;color:var(--ink);text-wrap:balance}
.sold-property{--sf:clamp(20px,1.75vw,25px)}
.sold-prop-copy .sold-say{margin-top:18px}
.sold-prop-price{font-size:clamp(56px,5.2vw,80px)}
.sold-prop-price .sold-digits{align-items:baseline}
.sold-prop-price .cur{align-self:flex-start}
.sold-prop-price .mil{margin-left:.2em;font-size:.36em;letter-spacing:-.01em}
.sold-prop-line{margin:16px 0 0;font-size:16px;line-height:1.55;color:var(--muted)}
.sold-cta{display:flex;align-items:center;justify-content:space-between;gap:28px 40px;margin-top:24px;padding:36px 40px;border-radius:28px;background:var(--pale)}
.sold-cta h3{margin:0;font-size:clamp(26px,2.4vw,34px);line-height:1.1;letter-spacing:-1.1px;color:var(--deep)}
.sold-cta p{margin:10px 0 0;font-size:16px;color:#4F5466}
.sold-cta-acts{display:flex;align-items:center;gap:26px;flex-wrap:wrap;flex:0 0 auto}
.sold-call-link{color:var(--deep);margin-top:0;min-height:44px}
/* the end of the Sold story: a hairline before the film (mobile audit P3) */
.sold-section+.film-section{box-shadow:inset 0 1px 0 var(--line)}
.sold-ph{width:18px;height:18px;flex:0 0 auto}

/* ---------- breakpoints ---------- */
@media (max-width:1359px){.sold-card{height:520px}}
@media (max-width:1099px){
  .sold-card{grid-template-columns:6fr 6fr;height:480px}
  .sold-label{--tf:30px;--pf:clamp(56px,6vw,72px);--sw:112px;--sh:52px;padding:32px 36px}
  .sold-results{--cols:2;--rows:17}
  .sold-section.is-live .sold-results:not(.is-all){--rows:4}
  .sold-section.is-live .sold-results:not(.is-all) li:nth-child(n+9){display:none}
  .sold-list-head .sold-lh2{display:none}
  .sold-property{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
}
@media (max-width:899px){
  .sold-card{grid-template-columns:1fr;grid-template-rows:400px minmax(0,1fr);height:690px}
  .sold-room{margin:12px 12px 0}
  .sold-label{--tf:28px;--pf:clamp(52px,8vw,72px);--sw:104px;--sh:48px;--sx:.8;--sy:-1.8;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head fig" "ctrl ctrl";column-gap:28px;align-content:center;padding:36px 32px 28px}
  .sold-head{grid-area:head;align-self:end}
  .sold-fig{grid-area:fig;align-self:end;margin-top:0}
  .sold-stamp{left:calc(100% - var(--sw) * var(--sx))}
  .sold-ctrl{grid-area:ctrl;margin-top:26px}
  .sold-sky{height:84px}
  .sold-cta{flex-direction:column;align-items:flex-start}
}
@media (max-width:720px){
  .sold-property{grid-template-columns:1fr;gap:22px;padding:16px 16px 26px}
}
@media (max-width:599px){
  .sold-section.section{padding-bottom:44px}   /* target: the whole section at or under 1950px on phones */
  .sold-card{grid-template-rows:300px minmax(0,1fr);height:612px;border-radius:22px}
  .sold-room{margin:10px 10px 0;border-radius:15px}
  .m-object{--pw:min(calc(86cqw * (.35 + .65 * var(--f))),calc(76 * (.35 + .65 * var(--f)) * var(--ar) * 1cqh),calc(var(--cw) * 1px))}
  .m-photo{--pw:min(90cqw,calc(72 * var(--ar) * 1cqh),calc(var(--cw) * 1px))}
  .m-photo .sold-piece{border-radius:10px}
  /* --pf is a whole pixel: at 65.625px (17.5vw on a 375 screen) WebKit drew the next digit row as a ghost under the price */
  .sold-label{--tf:23px;--pf:66px;--sf:19px;--sw:96px;--sh:46px;--sx:.24;--sy:-.42;display:flex;justify-content:flex-start;padding:22px 20px 14px}
  .sold-head{min-height:calc(23px + 2.24 * var(--tf))}
  .sold-head,.sold-fig{align-self:stretch}
  .sold-fig{align-self:flex-start;margin-top:16px}
  .sold-meta{font-size:12px;line-height:15px;letter-spacing:1.1px;margin-bottom:8px}
  .sold-title{letter-spacing:-.7px}
  .sold-say{margin-bottom:4px}
  .sold-stamp span{border-width:4px}
  .sold-hint{bottom:2px}
  .sold-rule{margin-top:8px}
  .sold-ctrl{gap:8px;margin-top:16px}
  .sold-play{width:48px;height:48px}
  .sold-prog{margin-left:8px;margin-right:46px}
  .sold-sky-wrap{display:none}
  .sold-results{--cols:1;margin-top:24px}
  .sold-more{margin-top:16px}
  .sold-list-head .sold-lh1{display:none}
  .sold-list{grid-auto-flow:row;grid-template-rows:none}
  .sold-section.is-live .sold-results:not(.is-all) li:nth-child(n+6){display:none}
  /* phone: the property is a side-by-side card, thumbnail left, title and price right (~240px) */
  .sold-property{grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:stretch;margin-top:24px;padding:14px;border-radius:22px}
  .sold-prop-img{align-self:center}
  /* phone card: a clean 3:4 crop of the open field (commercial-property-card.webp, overlay filled by _sold-lab/clean_prop.py) */
  .sold-prop-img img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:12px}
  .sold-prop-img figcaption,.sold-prop-line{display:none}
  .sold-prop-copy{align-self:center;padding:8px 0}
  .sold-prop-copy .section-pill{margin-bottom:10px}
  .sold-prop-copy h3{font-size:21px;letter-spacing:-.6px}
  .sold-property{--sf:16px}
  .sold-prop-copy .sold-say{margin-top:12px}
  .sold-prop-price{font-size:clamp(34px,10.5vw,42px)}
  .sold-prop-price .mil{font-size:.42em}
  .sold-cta{gap:18px;margin-top:16px;padding:24px 18px 20px;border-radius:22px}
  .sold-cta p{margin-top:8px}
  .sold-cta-acts{width:100%;flex-direction:column;align-items:stretch;gap:10px}
  .sold-cta .button{width:100%;justify-content:space-between}
  .sold-call-link{justify-content:center;height:48px;border-radius:30px;background:#fff;box-shadow:0 0 0 1px #D6E3EF}
}
@media (max-width:379px){.sold-label{--pf:62px}}
@media (max-width:339px){.sold-label{--pf:56px}}
/* short phones (iPhone SE 375x667): the whole card fits under the nav (612 -> 572px) */
@media (max-width:599px) and (max-height:700px){
  .sold-card{grid-template-rows:250px minmax(0,1fr);height:572px}
  .sold-hint{padding:4px 10px;font-size:11.5px}
}
/* phones and small tablets: the Ask B&H launcher steps aside while the Sold story is under it (sold.js sets html.sold-under),
   so it never sits on a price, the progress bar or the CTA */
@media (max-width:699px){
  html.sold-under .bhc:not(.is-open) .bhc-launch{opacity:0;translate:24px 0;pointer-events:none;visibility:hidden;
    transition:opacity .25s var(--soft),translate .4s var(--out),visibility 0s .25s}
}
@media (prefers-reduced-motion:reduce){
  .sold-btn,.sold-bar i,.sold-tip,.sold-more,.sold-more::after,.sold-hint,.sold-row{transition:none}
}