/* 17 The end. Where the page comes to rest. At the bottom of the page the view is: the header, the last line with its
   button and the fine print, centred in the space that is left, then the footer. The block that holds them is exactly
   as tall as that space (the viewport less the header and the footer; js/17-end.js measures the footer into
   --en-foot, the defaults below are its height at each width), so nothing is ever cut at the top of the last view.
   Laptop: four finished shorts flank the line, two on each side, the inner pair larger, each floating on its own slow
   breath (they only rise; nothing reacts to the mouse). Tablet and phone: all five drift past as one strip above the
   line (js/17-end.js doubles the row for a seamless loop and pauses it off screen). On a tablet the strip fits the last
   view with the line, so both are the block; on a phone only the line's block fills it, and the strip leaves the
   screen whole, never as a sliver under the header – unless all of it fits (.is-whole, set by js/17-end.js). */
.en-track img { display: block; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-short); background: var(--soft-2); }
.en .cta { margin-top: var(--s5); }
.en .cta-fine { text-wrap: balance; }
.en .btn .ico { width: 20px; height: 20px; }
.en-row .en-track img.en-clone { display: none; }

/* Laptop: [short short] the line [short short] */
@media (min-width: 900px) {
  .en { --pt: 0px; --pb: 0px; --en-foot: 202px; }
  .en .wrap.en-in { max-width: calc(1280px + 2 * var(--gutter)); }
  .en-in { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--s3); min-height: calc(100svh - var(--head) - var(--en-foot)); padding-top: var(--s6); padding-bottom: var(--s6); }
  .en-row, .en-track { display: contents; }
  .en-track img { grid-row: 1; width: 116px; position: relative; top: 30px; box-shadow: var(--sh-2); animation: en-float 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); }
  .en-track img:nth-child(1) { grid-column: 1; }
  .en-track img:nth-child(2) { grid-column: 2; width: 144px; top: 0; margin-right: var(--s4); }
  .en-track img:nth-child(3) { grid-column: 4; width: 144px; top: 0; margin-left: var(--s4); }
  .en-track img:nth-child(4) { grid-column: 5; }
  .en-track img:nth-child(n+5) { display: none; }
  .en:not(.is-on) .en-track img { animation-play-state: paused; }
  .en .en-hd { grid-column: 3; grid-row: 1; margin: 0; max-width: none; }
  .en .poster { font-size: clamp(52px, 5vw, 72px); }
  .en .poster .h2nd { display: block; }
}
@keyframes en-float { 50% { transform: translateY(-10px); } }
@media (min-width: 900px) and (max-width: 1279px) {
  .en-track img { width: 100px; }
  .en-track img:nth-child(2), .en-track img:nth-child(3) { width: 120px; }
  .en-track img:nth-child(2) { margin-right: var(--s3); } .en-track img:nth-child(3) { margin-left: var(--s3); }
}
/* Narrow laptops and tablets on their side: one short on each side */
@media (min-width: 900px) and (max-width: 1159px) {
  .en-in { grid-template-columns: 0 auto minmax(0, 1fr) auto 0; }
  .en-track img:nth-child(1), .en-track img:nth-child(4) { display: none; }
  .en-track img:nth-child(2), .en-track img:nth-child(3) { width: 132px; }
}
/* Short laptop screens: the same composition, a size smaller, so it still fits between header and footer */
@media (min-width: 900px) and (max-height: 700px) {
  .en-in { padding-top: var(--s5); padding-bottom: var(--s5); }
  .en .poster { font-size: clamp(48px, 4.4vw, 60px); }
  .en .cta { margin-top: var(--s4); }
  .en-track img { width: 96px; top: 24px; }
  .en-track img:nth-child(2), .en-track img:nth-child(3) { width: 112px; top: 0; }
}

/* Tablet and phone: the strip of all five, drifting, then the line */
@media (max-width: 899px) {
  .en { --pt: var(--s7); --pb: 0px; --en-foot: 260px; }
  .en-row { display: flex; margin: 0 calc(-1 * var(--gutter)); padding: 6px 0 14px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .en-track { display: flex; flex: none; width: max-content; padding-left: var(--gutter); }
  .en-track img { width: 128px; margin-right: 14px; box-shadow: var(--sh-1); }
  .en-row.is-loop .en-track { padding-left: 0; animation: en-drift 60s linear infinite; }
  .en-row.is-loop .en-track img.en-clone { display: block; }
  .en-row.is-loop:not(.is-on) .en-track { animation-play-state: paused; }
  @keyframes en-drift { to { transform: translateX(-50%); } }
  .en .en-hd { margin-top: 0; max-width: 980px; }
  .en .poster { font-size: clamp(44px, 6vw, 60px); }
}
/* Tablet: strip, line and button all fit the last view, so they are one block, centred between header and footer */
@media (min-width: 720px) and (max-width: 899px) {
  .en-in { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--head) - var(--en-foot)); padding-top: var(--s6); padding-bottom: var(--s6); }
  .en .en-hd { margin-top: var(--s5); }
}
/* Phone: where the strip can't share the last view with the line, the line's block alone fills that view (its spare
   room one part above, two below, so the strip stays close above it as the chapter arrives) and the strip leaves the
   screen whole, even when the browser's bars fold away (then 100lvh > 100svh). Where all of it fits between the
   header and the compact footer (js/17-end.js measures and sets .is-whole), strip, line and button are the last view
   together, centred, so no empty band sits under the button. --en-foot is the footer's phone height (base.css). */
@media (max-width: 719px) {
  .en { --pt: var(--s6); --en-foot: 148px; }
  .en-row { margin-bottom: calc(100lvh - 100svh); }
  .en-track img { width: 108px; margin-right: 12px; }
  .en .en-hd { display: flex; flex-direction: column; min-height: calc(100svh - var(--head) - var(--en-foot)); padding: var(--s4) 0; }
  .en .en-hd::before { content: ""; flex: 1 1 0; }
  .en .en-hd::after { content: ""; flex: 2 1 0; }
  .en .cta { margin-top: var(--s4); }
  .en.is-whole .en-row { margin-bottom: 0; }
  .en.is-whole .en-in { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--head) - var(--en-foot)); padding-top: var(--s3); padding-bottom: var(--s3); }
  .en.is-whole .en-hd { min-height: 0; margin-top: var(--s4); padding: 0; }
  .en.is-whole .en-hd::before, .en.is-whole .en-hd::after { content: none; }
}
/* Short phone screens (and most phones in Safari, once its bars are counted): the line in two smaller lines, so line,
   button and fine print still fit above the footer */
@media (max-width: 719px) and (max-height: 700px) {
  .en .poster { font-size: 32px; }
  .en .poster .h2nd { display: block; }
  .en .cta { margin-top: var(--s3); gap: var(--s1); }
  .en .btn { min-height: 52px; }
  .en .cta-fine { line-height: 1.4; }
  .en .en-hd { padding: var(--s1) 0; }
}
@media (prefers-reduced-motion: reduce) {
  .en-track img { animation: none; }
}