/* WAD Commander handout: the A4 layout of both faces, for print and tall
   portrait screens. index.html links it for print, screen and (min-width: 700px)
   and (min-height: 1000px) and (max-aspect-ratio: 5/4); the 3D box
   (default 3D view) switches it on everywhere. Units: see handout.css. */

.desk { gap: 0; padding: 0; }
.face { width: 100rem; height: 141.43rem; }

.face--front {
  --m: 7rem;
  grid-template-rows: 7.6rem 5rem auto 2.6rem auto minmax(0, 1fr) auto 3rem 3.2rem 2rem auto 2.8rem;
  grid-template-areas:
    "band band band"
    ". . ."
    ". logo ."
    ". . ."
    ". tag ."
    ". art ."
    ". callouts ."
    ". . ."
    "stripes stripes stripes"
    ". . ."
    ". foot ."
    ". . .";
  row-gap: 0; padding: 0;
}
.face--front .topband { height: 7.6rem; font-size: 2rem; gap: 1.8rem; }
.face--front .platform, .face--front .publisher-logo { height: 3.8rem; }
.face--front .topband-rule { height: 1.6rem; background: repeating-linear-gradient(to bottom, #8f8f8f 0 .22rem, transparent 0 .5rem); }
.logo { row-gap: 1.6rem; }
.tagline { padding-right: 0; font-size: 3.2rem; text-align: center; }
.postit { width: 18%; }
.floppy canvas, .floppy [data-floppy-fallback] { width: auto; height: 100%; max-width: 100%; }
.burst { right: -2rem; bottom: 6%; width: 19rem; }
.burst span { font-size: 2.5rem; }
.callouts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.callouts li { padding: 1.2rem 1.4rem; border-top: 0 !important; border-left: .15rem solid #2a2a2a !important; font-size: 1.35rem; }
.callouts li:first-child { border-left: 0 !important; }
.callouts b { font-size: 4rem; margin-bottom: .4rem; }
.stripes { height: 3.2rem; }
.front-foot { font-size: 1.6rem; }

.face--back {
  --m: 6rem;
  grid-template-columns: var(--m) 15rem 2rem minmax(0, 1fr) 2.6rem minmax(0, 43rem) var(--m);
  grid-template-rows: 4.2rem auto 2.6rem auto 3rem auto minmax(0, 1fr) auto auto 3.2rem;
  grid-template-areas:
    ". . . . . . ."
    ". head head head head head ."
    ". . . . . . ."
    ". shots shots shots shots shots ."
    ". . . . . . ."
    ". features features features . sysreq ."
    ". . . . . . ."
    ". scan . links links links ."
    ". scan . foot foot foot ."
    ". . . . . . .";
  row-gap: 0; padding: 0;
}
.logo-line { max-width: 60rem; }
.headline { max-width: none; font-size: 4.2rem; white-space: nowrap; }
.intro { max-width: 63rem; font-size: 1.5rem; }
.sticker { top: 2.4rem; right: 3rem; width: 26.4rem; }
.shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6rem 2.6rem; }
.shots figcaption { font-size: 1.35rem; }
.label { font-size: 1.45rem; }
.features li { font-size: 1.4rem; }
.sysreq dl > div { font-size: 1.25rem; }
.sysreq-title { font-size: 1.45rem; }
.scan { display: grid; }
.scan-title, .scan p { font-size: 1.3rem; }
.links { align-self: start; font-size: 1.35rem; }
.countdown { flex-basis: auto; }
.back-foot { align-self: end; grid-template-columns: auto minmax(0, 1fr); padding-top: 1.4rem; margin-left: 0; }
.dev img { width: 15rem; }
.legal { font-size: 1.1rem; }
.barcode { grid-column: 2; justify-self: end; font-size: 1.05rem; }
.barcode-bars { width: 19rem; height: 4.2rem; }