/* We buy: the jeweller's balance (scripts/buy.mjs). Behind the whole page one brass balance, rendered with real light (buy-balance.py) and played by
   /v6/flow.js as the page is read; What we buy is five real-light close-ups (buy-macros.py) with the words under them, never over.
   Motion: transforms and opacity only. Still mode (reduced motion, ?still, Pause) and no JS: the last still, nothing moves. */

html.pg-we-buy body{background:#050508}
.pg-we-buy main .sc.ink{background:transparent}
.pg-we-buy main>.lamp{display:none}

/* ---------- behind the page: the balance ---------- */
.buybg{position:fixed;inset:var(--bar) 0 0;z-index:0;pointer-events:none;contain:strict;--dim:0}
/* a short, wide window (Mark's laptop, 1280 x 585): the whole balance stays in view, set to the right, its left edge fading into the dark behind the words */
@media(min-width:768px) and (min-aspect-ratio:2/1){
  .buybg .still,.buybg .fr{object-fit:contain!important;object-position:100% 50%!important;-webkit-mask-image:linear-gradient(90deg,transparent 18%,#000 46%);mask-image:linear-gradient(90deg,transparent 18%,#000 46%)}
}
.buybg picture,.buybg .still{position:absolute;inset:0;width:100%;height:100%;display:block}
.buybg .still{object-fit:cover;transition:opacity .8s var(--ease)}
.buybg.live .still{opacity:0}   /* flow.js lays its two picture layers (.fr, pages.css) over the still */
/* the words stand on the left: a soft shade there; deeper while the pictures are read (--dim) */
.buybg .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,8,.8) 0%,rgba(5,5,8,.5) 34%,rgba(5,5,8,0) 58%),linear-gradient(rgba(5,5,8,.3),rgba(5,5,8,0) 26%)}
.buybg .scrim::after{content:"";position:absolute;inset:0;background:rgba(5,5,8,.8);opacity:var(--dim)}
.wb{position:relative;z-index:1}
.pg-we-buy main>.ink+.ink{border-top:0}

/* ---------- the opening ---------- */
.wb-hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--bar) + 24px) 0 48px;box-sizing:border-box}
.wb-hero .wrap{width:100%}
.wb .txt{max-width:560px}
.wb-hero h1{font-size:clamp(56px,min(10vw,15vh),168px)}
.wb-hero .sub{max-width:30em}

/* ---------- What we buy: five pictures ---------- */
.wb-list h2{font-size:clamp(38px,4.2vw,68px);margin-bottom:14px}
.wb-out{margin:0 0 clamp(28px,5vh,48px);font:300 italic clamp(20px,1.7vw,26px)/1.35 var(--display);color:var(--gold-hi)}
.wb-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.wb-tiles a{display:block;color:var(--on-ink);text-decoration:none}
.wb-tiles .pic{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:#07080d;box-shadow:inset 0 0 0 1px rgba(226,194,156,.16),0 24px 48px -28px rgba(0,0,0,.9);position:relative}
.wb-tiles .pic::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(226,194,156,0);transition:box-shadow .5s var(--ease)}
.wb-tiles img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.wb-tiles .nm{display:flex;align-items:baseline;gap:10px;padding:16px 2px 0;font:300 clamp(22px,1.9vw,30px)/1.15 var(--display);transition:color .3s}
.wb-tiles .nm i{margin-left:auto;font:400 16px var(--text);font-style:normal;color:var(--cu-lt);transition:transform .4s var(--ease)}
.wb-tiles .nm i::after{content:"→"}
.wb-tiles a:hover .nm,.wb-tiles a:focus-visible .nm{color:var(--gold-hi);font-style:italic}
.wb-tiles a:hover .nm i,.wb-tiles a:focus-visible .nm i{transform:translateX(5px)}
.wb-tiles a:hover .pic::after,.wb-tiles a:focus-visible .pic::after{box-shadow:inset 0 0 0 1px rgba(226,194,156,.7)}
.js:not(.still) .wb-tiles a:hover img{transform:scale(1.04)}
.wb-tiles a:focus-visible{outline:none}
.wb-tiles a:focus-visible .pic{outline:2px solid var(--gold-hi);outline-offset:4px}
.wb-tiles .wb-other .nm{font-size:clamp(18px,1.4vw,22px);line-height:1.2}

/* ---------- we pay in cash ---------- */
.wb-paid{min-height:90vh;min-height:90svh;display:flex;align-items:center}
.wb-paid .wrap{width:100%}
.wb-paid .txt{max-width:520px}
.wb-paid .detail{color:var(--on-ink-2)}
.wb-paid .cta{margin-top:32px}

/* ---------- a short laptop window (1280 x 585): everything a little tighter ---------- */
@media(min-width:768px) and (max-height:700px){
  .wb-list{padding-top:72px;padding-bottom:72px}
  .wb-tiles{max-width:calc((100svh - 300px) * 5 * .8 + 96px)}
  .wb-tiles .nm{padding-top:10px}
}

/* ---------- phones: the balance stands at the top, the words below it ---------- */
@media(max-width:767px){
  .buybg .still{object-position:50% 0}
  .buybg .scrim{background:linear-gradient(rgba(5,5,8,.1),rgba(5,5,8,.15) 30%,rgba(5,5,8,.75) 58%,rgba(5,5,8,.85))}
  .wb-hero{align-items:flex-end;padding-top:46svh;padding-bottom:40px;min-height:0}
  .wb-hero h1{font-size:clamp(56px,17vw,96px)}
  .wb-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
  .wb-tiles .wb-other{grid-column:1/-1}
  .wb-tiles .wb-other .pic{aspect-ratio:16/9}
  .wb-tiles .nm{font-size:22px;padding-top:10px}
  .wb-tiles .wb-other .nm{font-size:20px}
  /* the cash lands on the balance at the top of the screen; the words wait below it */
  .wb-paid{min-height:100vh;min-height:100svh;align-items:flex-end;padding-bottom:calc(var(--mbar,0px) + 72px)}
}

/* the closing (address, map) and the footer stand on a dark ground, so the balance never shows through the words */
.pg-we-buy main>.sc.ink.close{background:linear-gradient(rgba(5,5,8,0),rgba(5,5,8,.92) 160px)}
.pg-we-buy .foot{position:relative;z-index:1;background:rgba(5,5,8,.94)}