/* /code — the automation layer.

   CENTRED IN THE VIEWPORT, which is the pattern Juan identified across the rest
   of the site: the hero centres its copy vertically, and every /work panel is
   `align-content: center`. These two new pages were the only ones anchored to
   the top, and that mismatch is exactly why they read as belonging to a
   different site. The page now holds one composition, centred, the way a panel
   does — the header sits with the diagram rather than above it.

   The rig's own rules live in work.css because it is the same component and
   there must be exactly one copy of it. */

/* THE TREE IS THE MAIN CONTENT, so the tree is what centres. The first screen
   is the header and the diagram, vertically centred exactly like a /work panel
   and exactly like the hero. The lesson, the tags and the GitHub link are
   supplementary — they sit below the fold, which is where supplementary things
   belong. Trying to fit all of it into one viewport is what pushed the
   composition off-centre and made the page scroll anyway. */
/* ⚠️ NOT `.wrap`. Same bug as /film: a 940px reading measure minus 7vw of
   padding squeezed the diagram into the middle third of a wide screen. The tree
   is the content here, so the tree gets the viewport; only the prose below keeps
   a measure. */
.doc__main.code {
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 6vh 4vw 5vh;
}
.code__after {
  padding-block: 0 12vh;
}

/* the header joins the composition instead of sitting on top of it */
.doc__head--sub {
  min-height: 0;
  padding-block: 0 clamp(22px, 3.4vh, 38px);
  text-align: center;
}
.doc__head--sub .doc__h1 { font-size: clamp(24px, 3vw, 40px); }
.doc__head--sub .back {
  margin-bottom: clamp(20px, 3vh, 32px);
}
.doc__head--sub .doc__h1 { max-width: none; margin-inline: auto; }
.doc__head--sub .doc__lede { margin-inline: auto; text-align: center; }

.code__note {
  max-width: 62ch; margin: clamp(30px, 4.5vh, 48px) auto 0;
  text-align: center;
}
.code__note .item__cost {
  margin-block: 0 16px !important;
  text-align: left;
  /* the accent rule reads as a pull-quote, which is what this line is */
  border-left: 2px solid rgba(240, 168, 60, .45);
  padding-left: 16px;
}
.code__note .tags { margin-bottom: 14px !important; }

/* the back link and the footer are chrome, so they pin rather than centre */
.doc__foot { padding-block: 0 8vh; text-align: center; }
.doc__foot .links { justify-content: center; }