/* The engagement archive.
   Enqueued after main.css, like every other page stylesheet — see the note
   above svaflo_assets() in functions.php before changing an enqueue order.

   The page is a list of a hundred and sixteen things, which is the most
   information anywhere on this site. It gets exactly the vocabulary the rest
   of the site already has — a hairline, two grounds, an eyebrow, Cormorant for
   the year and Mulish for everything else — and nothing new. A table would
   have been easier and would have looked like a different website. */

.archive-hero .wrap{display:block;padding-block:clamp(24px,4vw,56px) clamp(40px,6vw,72px)}
.archive-hero .hero-copy{padding-left:0;max-width:44ch}
/* Smaller than the home hero. At the home page's size this heading broke as
   "Where this / has / happened." with a two-letter word alone on a line — the
   hero h1 is sized for two or three words and this one is four. */
.archive-hero h1{font-size:clamp(34px,4.2vw,58px);max-width:16ch}

.archive .wrap{padding-block:clamp(48px,7vw,88px)}

/* ── a year, and the things in it ─────────────────────────────────────────── */

.ayear{display:grid;grid-template-columns:120px 1fr;gap:clamp(24px,4vw,56px);
  padding-block:clamp(28px,4vw,44px)}
.ayear + .ayear{border-top:1px solid var(--line)}

/* The year sticks while its own entries scroll past, so a reader who is
   forty items into 2019 can still see which year they are in. It releases at
   the next year because the grid cell ends there — no script, no offsets. */
/* ⚠ `letter-spacing:normal` IS THE WHOLE COST OF PROMOTING THIS TO AN <h2>, and
   it is here so the promotion costs nothing. `h1,h2` in main.css sets
   -.008em; at 44px that is -.35px a digit, about 1.4px across "2026" — invisible
   on its own and exactly the kind of drift that accumulates. Everything else
   this rule already declares beats the h2 defaults on specificity, and
   `h1,h2,h3{margin:0}` is global, so nothing else moves.
   `scroll-margin-top` is for the year strip: without it a jump puts the heading
   under the sticky masthead. 78px = the 62px phone header plus air. */
.ayear-n{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(30px,3.4vw,44px);
  font-weight:300;line-height:1;letter-spacing:normal;color:var(--soft);
  position:sticky;top:110px;align-self:start;scroll-margin-top:78px}

/* ── THE YEAR STRIP ───────────────────────────────────────────────────────────
   111 entries over 20 phone screens with no way in. A row of years, scrollable
   sideways on a phone, wrapping on a desktop.
   ⚠ EVERY LINK CLEARS 44px BY CONSTRUCTION — 14px of padding above and below a
   16px line box. Built to the floor rather than patched up to it afterwards,
   which is what the three tap-target releases on 29 August were about. */
.ayears{display:flex;flex-wrap:wrap;gap:2px 10px;margin-bottom:clamp(20px,3vw,34px);
  padding-bottom:6px;border-bottom:1px solid var(--line)}
.ayears a{display:inline-block;padding:14px 10px;font:400 13px/16px Mulish,sans-serif;
  letter-spacing:.08em;color:var(--soft);text-decoration:none;border-radius:2px}
.ayears a:hover,.ayears a:focus-visible{color:var(--sage);background:var(--paper-2)}

.alist{display:flex;flex-direction:column}

.aitem{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding-block:14px}
.aitem + .aitem{border-top:1px solid var(--line)}

/* Title first and largest, then the organisation if it is not the same words
   again, then what happened. Two thirds of the records have no organisation
   worth printing, so the row has to look right with the middle line absent —
   which is why the gap is small and nothing is aligned to it. */
.aitem-main{display:flex;flex-direction:column;gap:3px;min-width:0;max-width:56ch}
.atitle{font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;font-weight:300;
  line-height:1.25;color:var(--ink)}
.aorg{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.aprog{font-size:var(--t-detail);line-height:1.5;color:var(--soft)}

.aitem-meta{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  text-align:right}
.awhen{font-size:13px;color:var(--soft);white-space:nowrap}

/* The flag. Small, lowercase, and NOT red — an unconfirmed entry is a note
   about the record, not a warning about the work. It only has to be findable
   by someone scanning for it. */
.aflag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);
  border:1px solid var(--line);border-radius:999px;padding:2px 8px;white-space:nowrap}
.aflag-x{color:var(--terracotta);border-color:var(--terracotta)}

.archive-note .wrap{padding-block:clamp(40px,6vw,72px)}
.archive-note .person-note{max-width:62ch}

/* ── THE PHONE ─────────────────────────────────────────────────────────────
   Its own block, because this stylesheet is enqueued AFTER main.css and the
   rules above would otherwise beat main.css's phone block at equal
   specificity. Seventh time this has come up; the fix is always to say where
   a rule applies. */
@media (max-width:760px){
  .ayear{grid-template-columns:1fr;gap:14px;padding-block:26px}
  /* Not sticky on a phone: a sticky year under a sticky masthead eats a third
     of a 390×844 screen before any content shows. */
  .ayear-n{position:static;font-size:26px}
  .aitem{flex-direction:column;align-items:flex-start;gap:6px}
  .aitem-meta{align-items:flex-start;text-align:left;flex-direction:row;gap:10px}
  .archive-hero .hero-copy{max-width:none}
}