/* Home hero, on scroll. The hero holds for a quarter of a screen while its text and logos fade away, the photograph slowly closes
   in, and one statement fades up dead centre; then the page carries it off, the words staying in the middle of what is left on
   screen. Nothing stops the wheel. (Until 2 November it held for half a screen and stopped the wheel at the statement: too long a
   scroll, and not smooth.) Timings in tomita-hero-statement-*.js. */
@media (min-width:768px){
 html body #top#top#top{height:125svh!important;min-height:0!important;overflow:visible!important}
 html body #heroImages#heroImages{position:sticky!important;top:0;height:100svh;min-height:560px;overflow:hidden}
 html body #heroImages .hero-image-stage{transform-origin:50% 50%}
}
/* Phones: the photograph scrolls away like any other, a little short of the screen so the paper below shows, and nothing is laid over it */
@media (max-width:767px){
 html body #tm-bronze-mobile .tm-hero-pin>figure.hero{height:88svh!important}
 html body #tm-bronze-mobile figure.hero .tm-statement{display:none}
}
#siteHead:focus-within{opacity:1!important;pointer-events:auto!important}
/* what is on the hero at rest fades as one (filter, so it multiplies with each element's own opacity) */
html body #heroImages .hero-image-caption,html body #heroImages .hero-image-quote,html body #heroImages .hero-image-footer,html body #heroImages .hero-scroll-link,
html body #tm-bronze-mobile figure.hero .tm-m-sample,html body #tm-bronze-mobile figure.hero .tm-m-count{filter:opacity(var(--hx,1))}
.tm-hero-clear .hero-image-footer,.tm-hero-clear .hero-scroll-link,.tm-hero-clear .tm-m-sample,.tm-hero-clear .tm-m-count{pointer-events:none!important}
/* the statement: a veil over the photograph, the words in the middle of what is left of it */
html body .tm-statement{position:absolute;inset:0;z-index:4;display:grid;place-items:center;margin:0;padding:0 24px;background:rgba(10,9,8,.46);opacity:0;pointer-events:none;will-change:opacity}
html body .tm-statement p{position:relative;margin:0;max-width:26em;font:500 clamp(20px,1.667vw,28px)/1.2 Inter,Arial,sans-serif;letter-spacing:0;color:#999;text-align:center;text-wrap:balance}
html body .tm-statement p b{position:absolute;left:0;right:0;bottom:100%;margin:0 0 12px;font:500 14px/1.3 Inter,Arial,sans-serif;color:#999}   /* out of the flow, so the sentence itself is on the centre */
html body .tm-statement p span{display:block;color:#999}
@media (prefers-reduced-motion:reduce){
 html body #top#top#top{height:100svh!important}
 html body .tm-statement{opacity:1}
 html body .tm-statement p span,html body .tm-statement p b{color:#f5f5f5}
}

/* the film slide: the poster shows until the film is actually moving */
html body #heroImages .hero-image-frame .tm-hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
html body #heroImages .hero-image-frame .tm-hero-film.is-playing{opacity:1}
@media (prefers-reduced-motion:reduce){html body #heroImages .hero-image-frame .tm-hero-film{display:none}}

/* side swipes reach the slideshow: the browser keeps only up-and-down and pinch here (in the hero zone, only pinch) */
html body #heroImages,html body #tm-bronze-mobile figure.hero{touch-action:pan-y pinch-zoom}
html body #heroImages .hero-image-stage{-webkit-user-select:none;user-select:none}
/* the phone hero's other slides: they lie over the first and fade, as the wide hero's do */
.tm-m-slides,.tm-m-count{display:none}
@media (max-width:767px){
 html body #tm-bronze-mobile figure.hero .tm-m-slides{display:block;position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;transform-origin:50% 50%}
 html body #tm-bronze-mobile .tm-m-slide{position:absolute;inset:0;opacity:0;transition:opacity 1100ms cubic-bezier(.25,.1,.25,1)}
 html body #tm-bronze-mobile .tm-m-slide.on{opacity:1}
 html body #tm-bronze-mobile .tm-m-slide img,html body #tm-bronze-mobile .tm-m-slide video{position:absolute;inset:0;width:100%;height:100%;max-width:none!important;max-height:none!important;object-fit:cover;object-position:var(--p,50% 50%)}
 html body #tm-bronze-mobile .tm-m-slide video{opacity:0;transition:opacity .7s ease}
 html body #tm-bronze-mobile .tm-m-slide video.is-playing{opacity:1}
 html body #tm-bronze-mobile figure.hero .tm-m-count{position:absolute;left:0;right:0;bottom:80px;z-index:6;display:flex;align-items:center;justify-content:center;gap:6px;color:#fff;font:400 11px/1 Inter,Arial,sans-serif;letter-spacing:.12em;text-shadow:0 1px 8px rgba(0,0,0,.45)}
 html body #tm-bronze-mobile figure.hero .tm-m-count button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:inherit;filter:drop-shadow(0 1px 4px rgba(0,0,0,.45))}
}
@media (prefers-reduced-motion:reduce){
 html body #tm-bronze-mobile .tm-m-slide{transition:none}
 html body #tm-bronze-mobile .tm-m-slide video{display:none}
}
/* 4 Nov 2026: the scroll animation is retired on computers too (user): the hero is one screen and scrolls away like the rest, and
   the statement over it is gone; #tm-intro below the hero carries the line now (the script lets go: RETIRED) */
@media (min-width:768px){
 html body #top#top#top{height:100svh!important}
 html body #heroImages#heroImages{position:relative!important}
 html body #heroImages .tm-statement{display:none!important}
}