/* Round 9: tablets (the owner: "examine the 3d scene on mobile / tablet... it's not optimal at all").
   Portrait, wider than the phone's layout but narrower than 4:5: the bay is the phone's picture, which this proportion
   cuts by a third, and the story's copy stood at the desktop's place, over the car and the stack. It takes the phone's
   arrangement at a tablet's size instead: the copy over the dark at the top, the picture held down to the floor under
   the stack (v17-stage.js), the caption and the chapters at the bottom.
   Landscape, 6:5 to 3:2: the wide picture loses its sides and the car comes up under the copy; a deeper shade from the
   left keeps the copy readable over it, and the heading is a little smaller. */
@media (min-width:761px) and (max-aspect-ratio:4/5){
  #samura .story-sticky{padding-top:118px}
  #samura .story-layout{display:flex;flex-direction:column;align-items:stretch}
  #samura .story-copy{align-self:stretch;padding:0}
  #samura .story-scenes{height:clamp(280px,32vw,370px)}
  #samura .story-panel.is-current{position:absolute}
  #samura .story-panel h1,#samura .story-panel h2{font-size:clamp(84px,12.5vw,150px);line-height:.85;padding-top:8px}
  #samura .story-panel h1 span+span,#samura .story-panel h2 span+span{margin-top:0}
  #samura .story-panel p{margin-top:24px;font-size:15px;line-height:1.75;max-width:470px}
  #samura .story-link{display:none}
  #samura .product-stage{flex:1;min-height:225px}
  #samura.is-v16 .stage-bottomline{top:auto;bottom:16px;left:0;right:0;justify-content:space-between}
  #samura.is-v17 .warehouse-stage::after{background:linear-gradient(180deg,#030405e6 0%,#030405b3 24%,#03040566 36%,#03040500 47%),linear-gradient(0deg,#030405d9 0%,#03040573 8%,#03040500 17%)}
  #samura.is-v17 .v16-poster img{object-position:50% 86%}
}
@media (min-width:761px) and (min-aspect-ratio:6/5) and (max-aspect-ratio:3/2){
  #samura.is-v17 .warehouse-stage::after{background:linear-gradient(90deg,#030405e0 0%,#030405b8 24%,#0304055c 42%,#03040500 56%),linear-gradient(0deg,#030405cc 0%,#03040570 6%,#03040500 13%)}
  #samura .story-panel h1,#samura .story-panel h2{font-size:clamp(80px,9vw,128px)}
  #samura .story-panel p{max-width:330px}
}
/* Between a phone's proportion and 4:5 (upright tablets, and small tablets that take the phone's layout, 540 x 720):
   the heading is sized by the window's height too, so that the copy, the car and the stack fit one over the other. */
@media (max-aspect-ratio:4/5) and (min-aspect-ratio:3/5){
  #samura .story-panel h1,#samura .story-panel h2{font-size:min(clamp(60px,12.5vw,150px),8.4svh)}
  #samura .story-scenes{height:calc(min(clamp(60px,12.5vw,150px),8.4svh)*1.7 + 112px)}
  #samura .film-study-copy h2,#samura[data-language="en"] .film-study-copy h2{font-size:min(13vw,8.6svh)}
  #samura .film-study-photographs{inset:34% 0 0}
}
/* The film section on an upright tablet: the copy over the top, the photographs below it, as on a phone (side by side,
   the heading ran over the photograph). */
@media (min-width:761px) and (max-aspect-ratio:4/5){
  #samura .film-study-topline{top:116px;left:6%;right:6%;font-size:9px}
  #samura .film-study-topline>span:last-child{font-size:18px}
  #samura .film-study-photographs{inset:34% 0 0}
  #samura .film-study-frame img{object-position:50% 56%}
  #samura .film-study-second img{object-position:55% 51%}
  #samura .film-study-shade{background:linear-gradient(180deg,#131413 0%,#131413c2 9%,transparent 32%,transparent 66%,#131413 100%)}
  #samura .film-study-copy{top:calc(116px + 5.5%);left:6%;width:88%}
  #samura .film-study-copy h2,#samura[data-language="en"] .film-study-copy h2{font-size:min(13vw,8.6svh)}
  #samura .film-study-copy>p{max-width:440px;font-size:14px;margin-top:22px}
  #samura .film-study-footer{left:6%;right:6%;bottom:6%}
}