/* The hero's right column (#hero-visual), where the 3D desk sits (see desk.css and desk.js).
   desk.js fits the desk to this box, so the size of the box is the size of the desk.
   It started as the card deck's box (see _archive/hero-cards/) and is now sized for the desk. */

/* Desktop and tablet: as tall as the hero and in the desk's own shape (.85 wide to 1 tall),
   but never wider than 46% of the hero, so the desk stays clear of the headline. It is pinned
   to the top of the hero, so it needs no transform to centre it. */
.hero-art#hero-visual{box-sizing:border-box;inset-block-start:0;height:100%;width:auto;aspect-ratio:.85;max-width:46%;inset-inline-end:1%;padding:0;transform:none;z-index:3;pointer-events:auto;direction:ltr}

.hero:has(#hero-visual) .hero-main{min-height:690px}

.hero:has(#hero-visual) h1{font-size:clamp(34px,5.2vw,100px)}

@media(min-width:1650px){.hero:has(#hero-visual) .hero-main{min-height:810px}}

@media(max-width:1100px) and (min-width:761px){.hero-art#hero-visual{inset-inline-end:0}.hero:has(#hero-visual) .hero-main{min-height:610px}}

/* Phone: the box runs from one edge of the screen to the other, in the same shape, up to 520px tall. */
@media(max-width:760px){.hero:has(#hero-visual) .hero-main{min-height:auto}.hero:has(#hero-visual) h1{font-size:clamp(30px,9.4vw,56px)}.hero-art#hero-visual{position:relative;height:auto;width:auto;max-width:none;max-height:520px;inset:auto;margin-inline:calc(var(--gutter) * -1);align-self:stretch;margin-block:38px 29px}}