/* ===========================================================================
   fivemile-shell.css

   The page shell: the reset, the measure, the section rhythm, and the four
   equal grids. Everything a FIVEMILE page needs to be the right shape before
   a single card is drawn.

   This file exists because the shell had been copied into six places and had
   started to drift. fivemile-archive.css carried a note saying that a third
   copy was the point at which the shell should move into fivemile-common.css.
   By the time anyone counted there were six, and common.css turned out to be
   the wrong destination. See DECISIONS.md 40 for the full reasoning; the short
   version is that eight pages keep their styles in an inline <style> block
   that sits BEFORE the link to common.css, so a .wrap in common.css would have
   silently overridden the page's own and retitled About, Announce, Calendar,
   Civic, Hollers, and Kitchen to a measure none of them use.

   So this is a separate file, and only the pages that actually share the shell
   load it. Nothing about anyone's load order had to change.

   WHO LOADS THIS  (23 pages)

     index.html, fivemile-news.html, fivemile-guide.html
     fivemile-calendar.html, fivemile-about.html
     the almanac and its four desks
     the archive and its four rooms
     heritage and its seven chapters

   THE CALENDAR IS THE ONE THAT MOVED. It kept its own 1100px measure on the
   grounds that it was a table that needed the room. It is not a table any
   more, it is a run of full width event stubs drawn to the card system, so it
   asked for this file by name. That is the only way a page is supposed to get
   it. See DECISIONS.md 41.

   WHO DOES NOT, AND MUST NOT

     announce (760px), hollers (860px), civic (1100px), kitchen (1120px).
     Four pages, four measures, all of them deliberate. If one of them ever
     wants the 1000px measure, it gets this file. It never gets it by default.

   ABOUT IS THE OTHER ONE THAT MOVED, and it moved the way this note said it
   would. It had been in the list above at 680px, and its panels came out a
   hundred and sixty pixels narrower than a card on any other page, which is
   visible the moment you click between them. It asked for this file by name.
   Its own block is now a link after this one, which is the load order the
   whole file is built on and which About had never had, because its styles
   used to sit inline ahead of common.css. See DECISIONS.md 46.

   LOAD ORDER IS  common, cards, shell, then the page's own file.

   The page file comes last so it can still win. That is how the almanac keeps
   .two-wide, the guide keeps its species grid, and heritage keeps a 16px
   empty state.

   WHAT DID NOT MOVE, AND WHY

   Three rules look like shell and are not, because the copies disagree about
   more than whitespace and reconciling them is a design change rather than a
   move:

     .src-note   almanac sets 22px/11.5px, archive and the guide set
                 34px/12.5px, and heritage is a different object entirely: a
                 boxed panel on card stock. Recommend unifying on the
                 archive values, which are the newer and more readable pair,
                 but that changes five almanac pages and should be seen
                 before it ships.
     .send       almanac gives .send .btn five more declarations than the
                 homepage and the news page do.
     .desk-intro the almanac's name for .lede, at 1.6 line height and a 16px
                 bottom margin against this file's 1.62 and 18px. Same object,
                 two names, two hairs apart. Merge it when somebody is looking
                 at the almanac anyway.

   The top gap is the other one. The seven pages in the almanac group put it on
   section.top and leave .wrap flush; the archive group, the guide, and
   heritage put it on .wrap. The numbers land two pixels apart and nobody can
   see the difference, which is exactly why it drifted. This file carries the
   flush version because it is the majority, and the other three files each add
   one padding-top line. Worth unifying, not worth a rendering change today.
   =========================================================================== */

/* The tokens this file's own rules read. Redeclared here with the values every
   page already carries, the same way fivemile-cards.css redeclares the brand
   colors, so the shell is not waiting on a page file to be well formed. */
:root{
  --paper:#F2E8D5;--card:#FAF6EE;
  --ink:#1C1208;--ink2:#4a3418;
  --sans:"Plus Jakarta Sans",system-ui,sans-serif;--mono:"DM Mono",monospace;
  /* The marks on cards are emoji, and a browser that has not been told to
     reach for a color emoji face will render some of them as flat glyphs in
     the body face instead. fivemile-almanac.css and fivemile-guide.css each
     kept a copy of this; it belongs with the other two families. */
  --emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  --fm-rule:#DDCFB8;--fm-muted:#6B6156;

  /* The two charted holdings. Rain is the blue the news page already gives a
     weather story and the creek is the green it gives a creek story, so a
     reader who has seen those tags meets the same two colors on every chart.

     They sit here rather than in the archive stylesheet that first needed
     them, because the daily read on the homepage draws the creek in the same
     green and a colour written down twice is a colour that drifts. The charts
     read these straight off the page: an inline SVG is part of the document,
     so fill="var(--hold-creek)" resolves the same as it would on a div. */
  --hold-weather:#2E86AB;--hold-creek:#4A7C59;
}

/* ---------------------------------------------------------------------------
   RESET AND GROUND
   --------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:17px;
  line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}

/* The paper grain. Fractal noise at 2.2 percent, multiplied, fixed to the
   viewport so it does not travel with the scroll. It is the reason the paper
   color reads as paper rather than as a beige rectangle.

   The five archive pages did not have this before the shell existed. That was
   an oversight in fivemile-archive.css rather than a decision, and they pick
   it up here. It is the only thing on any page that this file changed the look
   of. See DECISIONS.md 40. */
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  opacity:.022;mix-blend-mode:multiply}

/* The contour drawing behind the page, painted by fivemile-common.js. Inert on
   a page with no canvas element, which is all five archive rooms. */
#topo-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}

/* Content sits above both of them. */
.page{position:relative;z-index:1}
a{color:inherit}

/* ---------------------------------------------------------------------------
   THE MEASURE

   1000px and a 20px gutter. Every page that loads this file agrees on it, and
   the six pages that do not agree do not load this file.

   No top padding: the first section carries the gap, because on most of these
   pages that section is section.top and it already has an opinion. The three
   files that do it the other way add a padding-top of their own.
   --------------------------------------------------------------------------- */
.wrap{max-width:1000px;margin:0 auto;padding:0 20px 24px}

/* 34px above every section after the first. This is the vertical rhythm of the
   whole site and it is the same number on all twenty-one pages. */
section.blk{padding:34px 0 0}

/* ---------------------------------------------------------------------------
   THE GRIDS

   Four equal grids and a stack, all on the same 12px gap the card system is
   drawn to. A card row is one of these or it is a mistake.
   --------------------------------------------------------------------------- */
.stack{display:grid;gap:12px}
.two-eq{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.three-eq{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.four-eq{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

/* A run of stubs down the page. Gap rather than a bottom margin on the card,
   so the last row does not hang a margin off the end of the section. */
.rows{display:flex;flex-direction:column;gap:10px}
.rows .card-stub{margin-bottom:0}

/* Cards in an equal grid finish level. */
.two-eq > .card-dept,.three-eq > .card-dept{height:100%}

/* The lead paragraph under a section head. One or two sentences saying what
   the page is for, then out of the way. 64ch because that is a line length a
   person can read outdoors on a phone. */
.lede{font-size:16.5px;line-height:1.62;color:var(--ink2);max-width:64ch;margin:0 0 18px}

/* An empty state is an em dash and nothing else. CLAUDE.md is explicit about
   it: no "loading", no "no data available", no "check back soon". This rule is
   only here to give that dash room to sit in. */
.empty{font-size:15px;color:var(--fm-muted);padding:12px 0}

/* ---------------------------------------------------------------------------
   RESPONSIVE

   Four steps, and every page that loads this file steps at the same widths.
   Tested at 390px, which is the width in CLAUDE.md.

   Four across goes to two at 900 and to one at 560. Two and three across both
   go straight to one at 820, because a two column card row on a narrow tablet
   is two cards too cramped to read rather than one card and some air.
   --------------------------------------------------------------------------- */
@media(max-width:900px){
  .four-eq{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .two-eq,.three-eq{grid-template-columns:1fr}
}
@media(max-width:760px){
  .wrap{padding:0 16px 20px}
}
@media(max-width:560px){
  .four-eq{grid-template-columns:1fr}
}