/* ==========================================================================
   INSET – a trial layer, loaded last
   --------------------------------------------------------------------------
   Puts a margin around the whole site so nothing bleeds off the window: the
   photographs, the rules and the coloured grounds all stop at the same line,
   and the page reads as one object sitting on a ground.

   TO UNDO: delete the single <link> to this file in partials/head.html and
   run build.py. Nothing else in the site depends on it.

   The ground colour is one line – --page-ground below. Ink is the trial;
   bone or paper are the obvious alternatives.
   ========================================================================== */
:root {
  --page-gap: clamp(10px, 1.5vw, 26px);
  --page-ground: var(--paper);   /* white behind. --field gives the
                                    faintest separation; --ink is the dark trial. */
}

html { background: var(--page-ground); }
body {
  position: relative;              /* so .band--over lands inside the margin */
  padding: var(--page-gap);
  background: var(--page-ground);
}

/* Everything that used to run the full width of the window now stops at the
   content box. These all shared the same `width: 100vw` + negative margin
   trick, so they are undone the same way. */
/* .next is NOT in this list: it is words, and words stop at --edge like
   every other piece of writing on the site. Only pictures come out to the
   frame. */
.bleed-hero,
.plate,
.split,
.cells {
  /* NOT width:100% – these carry a negative margin to reach the frame, and
     a fixed width plus a negative margin pulls the block off-centre: it hit
     the frame on the left and stopped --edge short on the right. */
  width: auto;
  margin-left: 0;
  margin-right: 0;
}

/* The opener is a window onto the page, not the whole screen. */
.bleed-hero { height: calc(100vh - var(--page-gap) * 2); }
.bleed-hero--page { height: calc(82vh - var(--page-gap) * 2); }

/* The fixed bar sits on the frame's own line, inside the margin – until it
   lands, when it becomes a full-width white bar against the top of the
   window. A strip of ground above the menu you have just scrolled back for
   reads as a gap rather than as the frame. */
.band { left: var(--page-gap); right: var(--page-gap); top: var(--page-gap); }
.band.is-landed {
  left: 0; right: 0; top: 0;
  padding-inline: calc(var(--edge) + var(--page-gap));
  padding-top: calc(var(--s3) + var(--page-gap));
}

/* Paper behind the content so the ground only shows in the margin. */
main, .band { background: var(--paper); }
.band--over { background: none; }

/* The footer keeps its own ground but sits inside the margin like the rest. */
.site-footer { margin: 0; }

/* On a phone the margin is small enough that a full-width photograph still
   has room to be a photograph. */
@media (max-width: 600px) {
  :root { --page-gap: 8px; }
}