/* WAD Commander handout: the landscape layout, two 16:9 faces, one per screen.
   index.html links it for screen and (min-width: 960px) and (min-height: 600px)
   and (min-aspect-ratio: 5/4); the 3D box (default 3D view) switches it off. Units:
   see handout.css. */

:root { font-size: min((100vw - 2 * var(--pad)) / 100, (100svh - 2 * var(--pad)) / 56.25); }
html { scroll-snap-type: y mandatory; }
.desk { gap: 0; padding: 0; }
.face { width: 100rem; height: 56.25rem; margin: calc((100svh - 56.25rem) / 2) 0; scroll-snap-align: center; }

.face--front {
  --m: 4rem;
  grid-template-columns: var(--m) minmax(0, 54fr) 2rem minmax(0, 36fr) var(--m);
  grid-template-rows: 4.2rem 2.6rem auto 1.4rem auto minmax(0, 1fr) 1.4rem auto 1.4rem 1.8rem 1rem auto 1.1rem;
  grid-template-areas:
    "band band band band band"
    ". . . art ."
    ". logo . art ."
    ". . . art ."
    ". tag . art ."
    ". . . art ."
    ". . . . ."
    ". callouts callouts callouts ."
    ". . . . ."
    "stripes stripes stripes stripes stripes"
    ". . . . ."
    ". foot foot foot ."
    ". . . . .";
  row-gap: 0; padding: 0;
}
.face--front .topband { padding: 0 var(--m); font-size: 1.35rem; height: 4.2rem; }
.face--front .tagline { padding-right: 0; font-size: 2.2rem; }
.postit { width: 18%; }
.floppy canvas, .floppy [data-floppy-fallback] { width: auto; height: 100%; max-width: 100%; }
.burst { right: -1.5rem; bottom: 0; width: 11rem; }
.burst span { font-size: 1.5rem; }
.callouts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.callouts li { flex-direction: row; align-items: baseline; gap: .7rem; padding: .8rem 1.2rem; border-top: 0 !important; border-left: .15rem solid #2a2a2a !important; }
.callouts li:first-child { border-left: 0 !important; }
.callouts b { margin: 0; font-size: 2.6rem; }
.stripes { height: 1.8rem; }
.front-foot { font-size: 1.15rem; }

.face--back {
  --m: 3rem;
  grid-template-columns: var(--m) minmax(0, 30fr) 2rem minmax(0, 36fr) 2rem 12rem 2rem minmax(0, 12fr) var(--m);
  grid-template-rows: 2.2rem auto 1.3rem auto 1.4rem minmax(0, 1fr) .8rem auto 1rem;
  grid-template-areas:
    ". . . . . . . . ."
    ". head head head head head head head ."
    ". . . . . . . . ."
    ". shots shots shots shots shots shots shots ."
    ". . . . . . . . ."
    ". features . sysreq . scan . links ."
    ". . . . . . . . ."
    ". foot foot foot foot foot foot foot ."
    ". . . . . . . . .";
  row-gap: 0; padding: 0;
}
.back-head { grid-template-columns: minmax(0, 48rem) minmax(0, 28rem); grid-template-areas: "logo intro" "headline intro"; column-gap: 3rem; row-gap: .8rem; align-items: start; }
.logo-line { grid-area: logo; max-width: 40rem; }
.headline { grid-area: headline; max-width: none; font-size: 3.1rem; white-space: nowrap; }
.intro { grid-area: intro; font-size: 1.1rem; line-height: 1.4; }
.sticker { top: 1.4rem; right: 2.4rem; width: 15.4rem; }
.shots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.8rem; }
.shots figure { gap: .6rem; }
.shots figcaption { font-size: 1.02rem; line-height: 1.3; }
.label { margin-bottom: .7rem; font-size: 1.15rem; }
.features li { font-size: 1.08rem; padding-block: .12rem; }
.sysreq { margin: .5rem .5rem 0; padding: 1rem 1.1rem .7rem; }
.sysreq-title { font-size: 1.15rem; }
.sysreq dl > div { font-size: 1rem; padding: .16rem .3rem; }
.scan { display: grid; padding: 1.7rem .8rem .6rem; }
.scan-title, .scan p { font-size: 1.05rem; }
.links { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .8rem; font-size: 1.05rem; }
.links a { padding: .45rem .7rem; }
.countdown { flex-basis: auto; }
.back-foot { grid-template-columns: auto minmax(0, 1fr) auto; padding-top: .8rem; gap: 1.6rem; }
.dev img { width: 10rem; }
.legal { font-size: .82rem; line-height: 1.35; }
.legal p + p { margin-top: .15rem; }
.barcode { grid-column: auto; padding: .4rem .7rem .25rem; font-size: .8rem; }
.barcode-bars { width: 13rem; height: 2.4rem; }