/* How To page (temporary): artwork only, until the real setup guide is written before launch.
   Loaded after site.css; shared navigation, Privacy button, footer and transitions come from there.

   Desktop artwork (1774 x 887, 2:1): dragon x ~40-470 and blackboard x ~400-800 on the left; the
   large empty wall on the right (x ~850-1700, y ~30-520) is reserved for the future guide.
   Portrait artwork (941 x 1672): dragon and blackboard x ~30-560, y ~330-720; the open floor
   below is reserved for the future guide. No visible text is placed in either area yet. */

/* ---------- Desktop: height-first scene ---------- */

.howto {
  position: relative;
  height: var(--vh);
  overflow: hidden;
  background: var(--walnut-950);
}

/* Narrower windows crop mostly from the right (15/85) so the dragon and blackboard stay in view;
   wider windows centre the scene on solid walnut. Never blurred, feathered or stretched. */
.howto__stage {
  --w: calc(var(--vh) * 2);
  position: absolute;
  top: 0;
  left: max(calc((100% - var(--w)) * .15), calc((100% - var(--w)) / 2));
  width: var(--w);
  aspect-ratio: 1774 / 887;
}
.howto__art {
  position: absolute;
  inset: 0;
}
.howto__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Portrait and phone ----------
   The portrait artwork fills the first screen (cropping a little from the right on narrow phones
   so the dragon and blackboard stay in view); the footer follows below. Same condition as the
   other pages, duplicated in the <source media> attributes in how-to/index.html. */

@media (max-aspect-ratio: 7/5), (max-width: 760px) {
  .howto { height: var(--vh); }
  .howto__stage {
    inset: 0;
    left: 50%;
    width: min(100%, 680px);
    aspect-ratio: auto;
    transform: translateX(-50%);
  }
  .howto__art img { object-position: 18% 50%; }

  /* The Privacy button stays fixed in the corner (over open floor); keep the footer notice clear of it. */
  .page-howto .site-footer { padding-bottom: calc(max(12px, env(safe-area-inset-bottom)) + 48px); }
}