/* The newsletter band — src/school-publications.md.
   Loaded on that page only, after explore.css, alongside newsletter-shelf.css.

   All this file does is the box the shelf sits in. The shelf itself is
   partials/newsletter-shelf.njk and has its own stylesheet. */

/* Three rows: the heading, the shelf, the line under it. The shelf takes
   whatever is left, rather than a height worked out from the window minus a
   guess at the furniture around it — that arithmetic was wrong often enough to
   collapse the shelf to nothing, and it is the sort of thing that only goes
   wrong on somebody else's screen.

   height, not min-height, and this one is not decoration. The shelf is a
   scroll container eighteen covers long, and 1fr of a band free to grow is 1fr
   of all eighteen: without a height here the band comes out fourteen thousand
   pixels tall. Fixing it at one screen is what gives that row a definite size
   to be the whole of — and one clean screen of black is what the band should
   read as anyway. It is also what data-hold needs: explore-hold.js will not
   pin a section taller than the window, and a section shorter than it leaves a
   strip of the page riding along beside the pin.

   Never less than 34rem, though. On a phone on its side one screen is about
   360px, and after the heading and the line under it the covers were left
   about 40px tall (Sean, 2026-09-22). Every screen held upright is taller
   than 34rem, so this only ever lets the band outgrow a short one — where it
   is too tall to be held anyway. */
.pubshelf {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: clamp(var(--sp-4), 2.5svh, var(--sp-8));
  height: max(100svh, 34rem);
  /* The shelf's own ground: the covers are photographic and want the band to
     fall away behind them, which the navy does not do. */
  background: var(--shelf-ground);
  color: var(--paper);
  --focus-ring: var(--paper);
}
.pubshelf h2 { color: var(--paper); }

/* Edge to edge across the band, outside .ex-shell: the shelf is dragged, and
   the whole width of the band should be something you can take hold of. */
.pubshelf .newsletter-menu { grid-row: 2; }

/* Centred under the shelf — which is centred on the band, as this is on the
   shell, so the two share an axis. */
.pubshelf-hint {
  margin: 0;
  color: var(--bms-sky);
  font-size: var(--step-1);
  font-weight: 600;
  text-align: center;
}
/* The same instruction in the reader's own terms. Keyed off the pointer rather
   than the width, because what decides between clicking and swiping is the
   thing in the reader's hand, not the size of the window — a narrow desktop
   window is still a mouse. The width clause is only there for a phone whose
   browser does not answer the pointer query; at 640px and under, it is a
   phone. display:none rather than hiding, so a screen reader is offered one
   line and not both. */
.pubshelf-hint-swipe { display: none; }
@media (pointer: coarse), (max-width: 640px) {
  .pubshelf-hint-drag { display: none; }
  .pubshelf-hint-swipe { display: inline; }
}

/* No scroll-snap of our own: data-hold does it, the same way it does on every
   other Explore page. It can, now that the shelf is dragged sideways rather
   than scrolled — the page's wheel runs through this band untouched, so the
   pin gets the scroll it needs to release. */