/* =========================================================================================
   Machines — page-only composition (loaded after main.css)
     1  hero ........ the statement at the foot, over the pop-up book reel
     2  features .... the drawing prints in, then holds still beside the four features
     3  explorer .... the menu as a rail of poster cards, on Night (main.css §11.22)
     4  paying ...... four open steps, the words large; their icons act in turn (main.css §11.15, .steps--open)
   (a band about putting a location's logo on the machine stood fourth until Oct 9, 2026: the owner stopped offering that)
   ========================================================================================= */

/* 1 · hero: the statement on two lines at every width, "Nothing hidden / behind the glass.": where the column
   is narrower than the longer line at the usual size, the type is sized to the column, so neither line wraps */
.hero--foot .hero__inner{container-type:inline-size}
.hero--foot .hero__title{max-width:none;font-size:min(clamp(2.75rem,5.6vw,5.25rem),11.2cqi)}
@media (max-width:600px){.hero--foot.hero--video .hero__title{font-size:min(clamp(2.2rem,10.2vw,2.75rem),11.2cqi)}}

/* 2 · features */
.features-section__grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(2rem,6vw,7rem);align-items:start}
.features-section__figure{--machine-w:clamp(220px,21vw,320px);position:sticky;top:calc(var(--hdr) + 2rem);justify-self:center}
/* tablets: the drawing stays sticky beside the list; phones: it stands centred above it */
@media (min-width:641px) and (max-width:900px){
  .features-section__grid{grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);gap:clamp(1.6rem,4vw,2.4rem)}
  .features-section__figure{--machine-w:100%;justify-self:stretch}
}
@media (max-width:640px){
  .features-section__grid{grid-template-columns:1fr}
  .features-section__copy{display:contents}
  .features-section__copy .section-head{order:1;margin-bottom:0}
  .features-section__figure{order:2;position:static;--machine-w:170px;justify-self:center}
  .features-section__copy .features{order:3}
}
/* the drawing prints in from the top as the band arrives (whole at once without JS, with reduced motion, in print) */
.js .features-section__figure.reveal{opacity:1;transform:none}
.js .features-section__figure.reveal>img{clip-path:inset(0 0 100% 0);transition:clip-path 1.7s cubic-bezier(.7,0,.2,1) .15s}
.js .features-section__figure.reveal.is-in>img{clip-path:inset(0)}

/* 3 · explorer: a little light falls in from the top of the band; the heading at the size of a statement */
.explorer{background-image:radial-gradient(ellipse 90% 60% at 50% 0%,color-mix(in srgb,var(--limestone) 9%,transparent),transparent 72%)}

/* 4 · paying: the four words large; nothing else is page-specific (the open steps: main.css §11.15) */
.paying .step__t{font-size:clamp(2rem,3.2vw,3.3rem);letter-spacing:-.012em}
.paying .step__d{max-width:24ch;text-wrap:pretty}
@media (max-width:560px){
  .paying .step__icon{width:2.6rem;height:2.6rem}
  .paying .step__t{font-size:1.7rem}
  .paying .step__d{font-size:.95rem;line-height:1.5}
}