/* ======================================================================
   RELEASE 0284. THE OWNER'S WALK, IN THE STYLESHEET.

   A FILE OF ITS OWN RATHER THAN MORE OF style.css. That file is 75,902
   bytes against a standing 80 KB rule, so it has about four thousand
   bytes of room left and the connector this repository is edited through
   re-sends a whole file for every change. Putting this block there would
   have cost a 76 KB re-type to add three thousand bytes and left the
   next block with nowhere to go. `plans.css` was split off for the same
   reason, and this is the same answer.

   IT LOADS AFTER style.css AND OVERRIDES NOTHING BY ACCIDENT. Every rule
   below either names a selector that file does not use, or restates one
   at the same specificity on purpose, which is why the link in
   `base.html` sits immediately after the main stylesheet. Every value is
   read from the token block at the top of style.css - no colour, size or
   easing is spelled out again here.

   WHAT IS NOT IN THIS FILE. The backdrop opacity. The card asks for it
   to be measured against `mock-C_desktop.png`, and that image is not in
   this repository - there is no image anywhere under `docs/`, and no
   design folder at the root - so there is nothing to measure against.
   Guessing a number and calling it measured would be the one dishonest
   line in a release about honesty, so `.net{opacity:.55}` is untouched
   and the item is reported rather than invented.
   ====================================================================== */

/* --- 1. WIDTH WHERE IT IS EARNED -------------------------------------
   The column is 860 because that is about ninety characters of this
   body size, which is where prose stops being comfortable. A hero and a
   table are not prose: the hero is three elements and a form, and a
   table with four columns of addresses and figures spends every pixel
   it is given. So a page built around those two gets 1040, and the
   paragraphs on it are pulled back to 860 so no sentence on this site
   is ever set wider than it reads well at.

   SCOPED TO `main:has(.hero)`, which is the front page. The token page
   already takes 1040 from the dossier rule in style.css and has no hero,
   so these two rules can never both apply to one page. 1100px rather
   than 1040 is the breakpoint because the column needs its gutters
   before it is allowed to grow into them. */
@media(min-width:1100px){
  main:has(.hero){max-width:1040px}
  main:has(.hero) .how,
  main:has(.hero) .intel-layer,
  main:has(.hero) .daily-feature{max-width:860px;margin-left:auto;
  margin-right:auto}
  main:has(.hero) .obituaries>.meta{max-width:860px;margin-left:auto;
  margin-right:auto}
}

/* --- 2. THE FOOTER, IN THREE COLUMNS ---------------------------------
   The three paragraphs already in it are the three columns: where to
   follow the site, what the site is careful to say it is not, and
   everywhere else on it. Stacked, the third ran to eleven lines of
   links and the first two read as its preamble.

   The link column is the widest of the three because it holds seventeen
   links and the other two hold a sentence each. Below 900px nothing
   changes: one column, in the order it is written, which is the footer
   as it is live today. */
@media(min-width:900px){
  footer{max-width:1040px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.9fr);
  gap:var(--s4) var(--s6);align-items:start}
  footer>p{margin:0}
  footer .social{grid-column:1}
  footer .footlinks{grid-column:3}
}

/* --- 3. THE NAVIGATION ON A PHONE ------------------------------------
   The separators are written in the markup as middots between the
   links, and at 375px the bar wrapped wherever it ran out of room - so
   a line could begin with a separator, or end with one hanging past the
   last link on that row. Laying the bar out as a wrapped row makes each
   middot an item with the same space either side of it, so a separator
   can only ever sit BETWEEN two links - and on a phone it is taken out
   of the bar altogether, because a row that wraps where it runs out of
   room can always end on a separator with nothing after it to separate.
   The even gap is the separator at that width; the markup still carries
   every middot, and every width above 700px prints all of them.

   Not one word, link or separator is added, removed or moved: this is
   the same markup, measured out. The search box takes a row of its own,
   which is what the comment above it in `base.html` has always said it
   needs - it is a full-width block on a phone and anywhere but last it
   breaks the line of links in half. */
@media(max-width:700px){
  header nav{display:flex;flex-wrap:wrap;align-items:center;
  column-gap:var(--s4);row-gap:0}
  header nav .navsep{display:none}
  header nav a{padding:10px 2px}
  header nav .navsearch{flex:1 0 100%;margin-top:var(--s2)}
}

/* --- 4. HOW IT WORKS, AS THREE NUMBERED STEPS ------------------------
   Three sentences that were one paragraph. NOT ONE WORD CHANGED and not
   one sentence reordered: the paragraph was three sentences, each about
   a different thing - what is read, how the market is labelled, and
   what an absent check is never allowed to count as - and they are now
   three items a reader can take one at a time.

   The numbers are a counter rather than typed characters, for the same
   reason the dossier panels are: a number written into a template is a
   number that can drift out of order the first time a step moves. */
.how ol.steps{list-style:none;margin:var(--s5) 0 0;padding:0;
counter-reset:step;display:grid;gap:var(--s5)}
@media(min-width:760px){
  .how ol.steps{grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s6)}
}
.how ol.steps li{counter-increment:step;color:var(--muted);
padding-top:var(--s3);border-top:1px solid var(--glass-line)}
.how ol.steps li::before{content:counter(step,decimal-leading-zero);
display:block;font-family:var(--font-mono);font-size:var(--t-small);
font-variant-numeric:tabular-nums;color:var(--accent);
letter-spacing:.04em;margin-bottom:var(--s2)}

/* --- 5. THE COPY CONTROL, ON HOVER AND ON FOCUS ----------------------
   One beside every address on the site is one more thing in the way of
   reading the address. It belongs to the line it serves, so it appears
   when a pointer is on that line and when it is tabbed to, and is out
   of the way otherwise.

   THREE THINGS THIS DOES NOT DO. It never leaves a control that can be
   clicked but not seen: the whole rule is inside `hover:hover`, so a
   touch screen - which has no hover and so could never reveal it - gets
   the control it has today, visible always. It never takes the control
   out of the tab order, because it is faded rather than hidden, and
   `:focus-visible` brings it back the moment it is reached by keyboard.
   And it never hides a control that has just been used: the done state
   stays up, so the reader sees that the copy happened. */
@media(hover:hover) and (pointer:fine){
  .copybtn{opacity:0;transition:opacity 140ms var(--ease)}
  code:hover+.copybtn,
  .copybtn:hover,
  .copybtn:focus,
  .copybtn:focus-visible,
  .copybtn[data-state="done"]{opacity:1}
  p:hover>.copybtn,
  li:hover>.copybtn,
  td:hover>.copybtn,
  div:hover>.copybtn,
  header:hover>.copybtn{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .copybtn{transition:none}
}