/* site-base.css — the theme-neutral half of the estate's CSS.

   This is a COPY of the shared rules inside shout-labs.css, not an extraction, and the
   duplication is deliberate. _ShoutLayout links the Shout sheet with asp-append-version,
   which stamps a content hash of the file into the emitted href — so editing shout-labs.css,
   even to delete a comment, changes the rendered HTML of every Shout Labs page. Extracting
   would also force that site to link two sheets where it links one, changing the same bytes
   a second way. Thirty duplicated lines is the cheaper mistake, and neither copy can drift
   because neither side is allowed to be edited.

   Shout Labs never links this file. It is loaded only by a non-default theme, ahead of that
   theme's sheet, which supplies every colour, face and dimension worth arguing about. */

:root{
  /* The token NAMES are the shared vocabulary; the values here are neutral placeholders a
     theme sheet is expected to overwrite. They exist at all so a theme that forgets one
     still renders legibly instead of transparent on transparent. */
  --paper:#ffffff;
  --paper-2:#f2f2f2;
  --ink:#111111;
  --muted:#666666;
  --line:rgba(0,0,0,.14);
  --line-2:rgba(0,0,0,.07);
  --maxw:1280px;
  /* The one dimension in the shared rules a theme genuinely wants to move: 84px is Shout's
     drafting rhythm, not a law of nature. */
  --band-pad:84px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}

/* One full-width horizontal band of the page, owned end to end by a single block. An
   element selector (`section{padding:…}`) would give two stacked blocks twice the gap
   between them the moment any block partial emits a <section> of its own, so bands opt in
   by class. Declared ahead of the block-specific rules so a band that wants different
   padding simply says so later and wins on source order. */
.band{padding:var(--band-pad) 0}

/* --cols is set inline by every query block, because column count is an editor field. */
.divs{display:grid; grid-template-columns:repeat(var(--cols,2),1fr); gap:0; border:1px solid var(--ink); overflow:hidden}

/* Cell dividers drawn in a way that survives ANY number of cards. Border arithmetic keyed
   on :nth-child only produces a clean edge for one exact card count, and the cards are
   editable pages — a fifth one is a single click. Instead every cell draws only its TOP and
   LEFT edge and is pulled back 1px, so the first row's and first column's borders land
   outside the container's padding box and are clipped away by overflow:hidden; the
   container's own border supplies the outer edge. Grid stretch resolves the negative margins
   by making each item 1px larger, so cells still meet flush and nothing overflows. */
.divs > *{border-left:1px solid var(--line); border-top:1px solid var(--line); margin-left:-1px; margin-top:-1px}

/* Card partials wrap the whole card in a link to its page, so the card has to stretch to
   the full height of its grid cell — otherwise the hover state stops short in any row where
   a neighbouring card is taller. */
.divs > a{display:flex; flex-direction:column; color:inherit}
.divs > a > .div{flex:1 1 auto; width:100%}

.files{display:grid; grid-template-columns:repeat(var(--cols,3),1fr); gap:18px}
.files > a{display:flex; flex-direction:column; color:inherit}
.files > a > .file{flex:1 1 auto; width:100%}

@media(max-width:900px){
  /* Follows the --cols rules on source order: a 3-column grid authored for a desktop still
     collapses on a phone, whatever the editor typed. */
  .divs,.files{grid-template-columns:1fr}
  .files{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){ .files{grid-template-columns:1fr} }