/* Home layout only (pages/index.md). Scoped; no colour, type or motion rules live here. */
/* S1 desktop: sky holds H1 and sub (3 lines + 1 at 1440), doors sit on the track, the loop keeps the plate crop */
body[data-page="index"] .hero--door{padding-top:calc(var(--nav-h) + 36px)}
body[data-page="index"] .hero--door h1{max-width:19ch}
body[data-page="index"] .hero--door .lead{max-width:none}
body[data-page="index"] .hero--door .hero__plate video{object-position:center bottom}
@media (min-width:701px) and (max-height:800px),(min-width:701px) and (max-width:1100px){
  body[data-page="index"] .hero--door .door{padding:12px 16px 14px;gap:4px}
  body[data-page="index"] .hero__routes{padding:6px 0 10px;column-gap:20px}
}
@media (min-width:701px) and (max-height:800px){body[data-page="index"] .hero--door{padding-top:calc(var(--nav-h) + 16px)}}
/* 1100 px and under: H1 and sub on black, a band of plate in the flexible gap, train on door 1's top rule */
@media (max-width:1100px){
  body[data-page="index"] .hero--door{height:auto;min-height:100svh}
  body[data-page="index"] .hero--door .hero__plate{position:relative;inset:auto;order:1;flex:1 0 96px;min-height:96px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 32px);mask-image:linear-gradient(to bottom,transparent 0,#000 32px)}
  body[data-page="index"] .hero--door .hero__plate :is(img,video){top:auto;bottom:-13.05vw;height:auto;aspect-ratio:1920/1071}
  body[data-page="index"] .hero__track{order:2}
  body[data-page="index"] .hero--door .lead{margin-bottom:16px}
  body[data-page="index"] .hero--door .doors{grid-auto-rows:1fr}
  body[data-page="index"] .hero--door .door{min-height:0;justify-content:flex-start}
  body[data-page="index"] .hero__routes .next{margin-left:0;width:100%}
}
/* S2: question left, entity sentence and link right */
body[data-page="index"] #what .t-0{max-width:15ch}
body[data-page="index"] #what .t-0 + .lead{margin-top:20px}
body[data-page="index"] #what .fig{max-width:1000px;margin-block:clamp(40px,5vw,72px)}
body[data-page="index"] #what .qa.cols2{align-items:start;row-gap:14px}
body[data-page="index"] #what .qa .lnk{grid-column:2;justify-self:start}
/* S3: picture bleeds left; logos, note, line and links keep one rhythm */
body[data-page="index"] #who .s__media{aspect-ratio:16/10}
body[data-page="index"] #who .who__pic .cap{margin-top:12px}
body[data-page="index"] #who .logos{margin-top:4px}
body[data-page="index"] #who .logos + .cap{margin-top:14px}
body[data-page="index"] #who .body{margin-top:24px}
body[data-page="index"] #who .who__links{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:16px}
/* S4: the H2 sits 15vh+ under the Train seam (site.css); cards share one slot */
body[data-page="index"] #next h2{margin-bottom:clamp(32px,4vw,56px)}
body[data-page="index"] #next .card h3{margin-top:8px}
body[data-page="index"] #next .card h3 + p{margin-top:-6px}
@media (max-width:900px){
  body[data-page="index"] #what .qa.cols2{grid-template-columns:minmax(0,1fr)}
  body[data-page="index"] #what .qa .lnk{grid-column:1}
}
/* phone: the 3:4 phone plate takes the band; the 16:9 loop does not match it, so it stays off */
@media (max-width:700px){
  body[data-page="index"] .hero--door{padding-top:calc(var(--nav-h) + 32px)}
  body[data-page="index"] .hero--door .hero__plate img{bottom:-30.7vw;aspect-ratio:3/4}
  body[data-page="index"] .hero--door .hero__plate video{display:none}
  body[data-page="index"] .hero--door .door{padding:12px 16px 14px;gap:4px}
  body[data-page="index"] .hero__routes{gap:0 22px;padding:10px 0 16px}
  body[data-page="index"] #contact .cta{align-items:stretch}
  body[data-page="index"] #contact .btn{width:100%}
}
/* v3 fixes: Issue IV real cover at the photo's 16:10 (#25), phone routes in the first screen (#3), Venn rhythm (R34) */
body[data-page="index"] #next .card__media--cover{background:#000}
body[data-page="index"] #next .card__media--cover img{object-fit:contain}
body[data-page="index"] #what .fig{margin-block:clamp(24px,3vw,40px)}
@media(max-width:700px){
  body[data-page="index"] .hero--door .doors{grid-auto-rows:auto;gap:6px}
  body[data-page="index"] .hero--door .door{min-height:0;padding:8px 14px 9px;gap:1px}
  body[data-page="index"] .hero--door .door__t{font-size:.875rem;line-height:1.3}
  body[data-page="index"] .hero--door .lead{margin-bottom:10px}
  body[data-page="index"] .hero__routes{display:flex;flex-wrap:wrap;gap:2px 16px;padding:4px 0 10px}
  body[data-page="index"] .hero__routes a{font-size:1rem;color:#C4C5CA;padding-block:5px}
  body[data-page="index"] .hero__routes .next{font-size:.8125rem;margin-top:2px}
}