/* Safeguarding — src/safeguarding.md.
   Loaded on that page only, after explore.css.

   This page is a hybrid, on purpose. It opens like an Explore page and ends
   with Keep Exploring, but everything between is the interior page it has
   always been: .page-section, .page-section-heading, .prose, .doclist and the
   rest, at the sizes they are everywhere else on the site. Only two things had
   to be built for it — the column those sections sit in, and the photographs. */

/* main#main.explore drops the padding and the cap that page.css gives an
   interior page, because a showcase runs edge to edge and each section sets
   its own width. This is that column put back — and it is .ex-shell's width,
   the same one Keep Exploring uses at the foot of the page, so the section
   headings and the document rules line up with the block below them instead
   of stopping short of it. */
/* White, edge to edge, against the page's tinted ground — the same band
   .exsection--raised makes on every other Explore page, and the same
   figure/ground the rail and the drawer use. It runs from the opening screen
   to Keep Exploring, so the whole body reads as one sheet rather than as ten
   sections floating on the ground. */
.sgband {
  padding-block: var(--ex-space);
  background: var(--paper);
}
/* The column inside it. */
.sgbody {
  width: var(--ex-shell);
  margin-inline: auto;
}

/* Everything runs the full column. Both carry a measure of their own from
   page.css that would leave them ending short of the rules above and below
   them — the same two right edges .psheet drops at 1200px, for the same
   reason. */
.sgbody .prose,
.sgbody .deflist { max-width: none; }

/* A photograph with the copy running round it, at the head of the part it
   belongs to. Sized by width rather than height here: a float's job is to
   leave a readable column beside itself, and that is a width. 22rem of a
   1276 column leaves about 54 characters a line, which is a comfortable
   measure to wrap in. */
.sgfigure {
  float: right;
  width: min(38%, 22rem);
  margin: var(--sp-1) 0 var(--sp-6) var(--sp-8);
}
.sgfigure img {
  display: block;
  width: 100%;
  height: auto;
}
/* A float that outlives its own part would hang into the next one's heading,
   and a list wrapped round one sets its bullets in a column too narrow to
   read. Both start clear of it. The prose closes over whatever is left, so a
   float can never reach past the section it was written into. */
.sgbody .prose h3,
.sgbody .prose ul,
.sgbody .prose ol { clear: both; }
.sgbody .prose::after {
  content: "";
  display: block;
  clear: both;
}

/* Too narrow to wrap round: the photograph takes its own line, and is capped
   by height so the portrait does not run away with the screen. */
@media (max-width: 700px) {
  .sgfigure {
    float: none;
    width: auto;
    margin: var(--sp-8) 0;
  }
  .sgfigure img {
    width: auto;
    max-width: 100%;
    max-height: 22rem;
  }
}

/* explore.css sets every h2 on an Explore page to --step-4 — a display size,
   right for a showcase section and three times what these headings are. It is
   `.explore h2`, so a bare `.page-section-heading` loses to it on the element
   in the selector; two classes take it back. The size, the weight, the colour
   and the gold mark are then exactly what they are on any interior page. */
.sgbody .page-section-heading {
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: normal;
}

/* The opening photograph, taken from 20% down rather than the middle so the
   top of his hair is not cut off, on desktop and phone alike (crop review,
   2026-09-19). */
.exoffer-portrait img { object-position: center 20%; }