/* =====================================================================
   THE "VIEW ALL" ARCHIVE -- every column one cadence product has
   published. Plan B, B2.4. Markup: templates/pages/product_archive.html.

   AN EXTERNAL FILE AND NOT AN INLINE BLOCK, because the page links
   product-page.css and that carries a promise: a page on the .pp-* layer
   declares no <style> of its own (test_product_page_shared_rules.py's
   test_a_ported_page_declares_no_style_block_of_its_own). The reason is
   not tidiness -- a page that links the layer AND keeps local rules is the
   mixed state Sudeep asked not to be delivered, and it is how four product
   pages became four designs the first time. `style-src 'self'` covers this
   in both CSP policies, same as edition-states.css and feature.css.

   WHAT IS HERE IS GEOMETRY ONLY: the thumbnail's box and the row it sits
   in. Everything with a LOOK -- the chip, the byline, the promo box, the
   dateline -- is already a component and is drawn by the layer, not
   restyled here. That is the difference between a page having a layout and
   a page having a design of its own.
   ===================================================================== */

/* THE ONLY RULES THIS PAGE DECLARES, and they are the list's geometry --
   the thumbnail's box and the row it sits in. Everything with a look
   (the chip, the headline, the summary, the byline) is already a
   component and is not restyled here. */
.arch-intro{font:var(--type-body-sm);color:var(--muted);max-width:70ch;
  margin:0 0 var(--space-md)}
.arch-list{display:flex;flex-direction:column;gap:var(--space-sm)}
.arch-row{display:flex;gap:var(--space-sm);align-items:flex-start;
  padding-bottom:var(--space-sm);border-bottom:1px solid var(--line)}
.arch-row:last-child{border-bottom:none}
/* aspect-ratio RESERVES THE BOX BEFORE THE PICTURE ARRIVES. An <img>
   with no dimensions and no ratio has no intrinsic size until its bytes
   land, so on a list of fifty rows every headline below the fold would
   jump as each thumbnail loaded. 1200/630 is the platform's declared
   hero spec, the same ratio .pp-sechero, .pp-cardimg and the homepage's
   lead image all carry. */
.arch-thumb{flex:0 0 132px;width:132px;aspect-ratio:1200/630;object-fit:cover;
  border-radius:8px;display:block}
.arch-body{flex:1;min-width:0}
.arch-hl{font:500 17px/1.35 var(--serif);margin:0 0 var(--space-3xs)}
.arch-hl a{color:var(--ink);text-decoration:none}
.arch-hl a:hover{color:var(--navy);text-decoration:underline;
  text-decoration-color:var(--accent)}
.arch-sum{font:var(--type-body-sm);color:#4a4a48;margin:0}
.arch-empty{text-align:center;padding:48px 20px;color:var(--muted)}
.arch-empty b{display:block;color:var(--ink);margin-bottom:var(--space-2xs)}
.arch-back{font:var(--type-label);color:var(--navy);text-decoration:none;
  letter-spacing:.06em;text-transform:uppercase;
  /* 44px of hit area on one line of 11px type -- the floor iOS, Material
     and WCAG 2.5.5 agree on. */
  display:inline-flex;align-items:center;min-height:44px}
.arch-back:hover{text-decoration:underline;text-decoration-thickness:2px;
  text-decoration-color:var(--accent)}
/* THE THUMBNAIL SHRINKS RATHER THAN STACKING. A stacked image would make
   each row a phone screen tall, which on a fifty-row archive is fifty
   screens; 96px still reads as a picture beside two lines of headline. */
@media(max-width:520px){
  .arch-thumb{flex-basis:96px;width:96px}
  .arch-hl{font-size:var(--fs-body-sm)}
  .arch-sum{font-size:var(--fs-caption)}
}

/* ===== THE ISSUE ARCHIVE (cp-387) =====================================
   pages/edition_archive.html -- every published ISSUE of an issue-product,
   grouped by month. Lives in this file rather than a new one because it is
   the same page family and the .arch-* names are already the archive's
   vocabulary; a second stylesheet would be a second place to look for "how
   does an archive row read".

   NO THUMBNAIL RULES HERE. A dated issue has no picture of its own -- the
   name of the Daily for 2 September is its date -- so this list is type
   only, and the .arch-thumb geometry above simply does not apply. */
.arch-count{font:var(--type-body-sm);color:var(--muted);margin:0 0 var(--space-md)}

.arch-month{margin:0 0 var(--space-lg)}
/* Sticky, so the month a reader is scrolling through stays named. On a
   ninety-issue archive the heading is the only thing that says where you
   are, and it is worthless the moment it scrolls away.

   --surface AND NOT A HEX. A sticky heading needs an OPAQUE ground or the
   dates scroll visibly through the letters, so the value here is doing
   real work rather than decorating -- which is exactly why it has to be
   the ground that is actually behind it. That ground is base.html's
   `.wrap{background:var(--surface)}`; .pp and .arch-month paint nothing,
   so --surface is what this heading covers up.

   The first draft said `var(--page-bg,#fffafa)`, and both halves were
   wrong: --page-bg is not a token this platform declares, so the fallback
   was the only value that ever applied; and #fffafa is STREAM A's card
   ground, which is not behind this heading and does not belong to a page
   to spell out (components.css owns it, `card--stream-a`). A hex written
   behind a plausible-looking var() is worse than a bare hex -- it reads
   as tokenised and is not. test_no_page_declares_a_stream_ground_for_
   itself_any_more caught it. */
.arch-month-hd{position:sticky;top:0;z-index:1;
  font:var(--type-label);letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy);background:var(--surface);
  margin:0 0 var(--space-2xs);padding:var(--space-2xs) 0;
  border-bottom:1px solid var(--line)}

.arch-dates{list-style:none;margin:0;padding:0}
/* A ROW IS A FULL-WIDTH TARGET, not a date-shaped one. The link text is a
   date, which is short, and a short link in a long list is the classic
   thing people miss on a phone -- so the anchor is the block and carries
   the 44px floor the rest of this file already respects. */
.arch-dates a{display:flex;align-items:center;min-height:44px;
  font:var(--type-body);color:var(--ink);text-decoration:none;
  padding:0 var(--space-2xs);border-radius:6px}
.arch-dates a:hover,.arch-dates a:focus-visible{background:var(--sunk);
  color:var(--navy);text-decoration:underline;text-decoration-color:var(--accent)}

.arch-empty{font:var(--type-body);color:var(--muted);margin:var(--space-lg) 0}