/* ============================================================
   FLIBBR DISPATCH ARCHIVE — Tier-2 archive-specific CSS

   Drives archive-dispatch.php — the year-grouped archive of
   long-form Dispatch pieces, with featured card and author rail.

   Lifted verbatim from flibbr-design-mockup-final-dispatch-archive.html
   (canonical locked 30 Apr 2026).
   Source range: canon lines 1700–2174.

   .page-header* selectors are NOT in this file — they're in
   page-chassis.css (lifted from canon page.html) so the archive
   shares the same hero-frame chassis as Tier-1 pages.

   v0.5.46 — the .dispatch-card family + .author-portrait family
   (base, gradients rj/sk/hg/gv, .portrait-initials, .typographic)
   were lifted to base.css per op-learning #16 (shared canonical
   utility families belong in base.css ahead of any template that
   uses them). Only dispatch-archive-context overrides remain in
   this file — most notably the typographic initial size variants
   for the rail and featured-byline contexts.

   Conditionally enqueued from functions.php on
   `is_post_type_archive( 'dispatch' )`.
   ============================================================ */

  .dispatch-archive {
    padding-block: var(--s-9) var(--s-9);
  }


  /* ----------------------------------------------------------
     FEATURED CARD — 2-col editorial split with image well

     Desktop: 5fr image / 7fr content. The image earns the bigger
     fraction because the well is what does the visual heavy lifting
     when the live-site featured slot has no real image yet.

     Mobile: stacks. Image first, content below.
  ---------------------------------------------------------- */
  .dispatch-featured {
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule-soft);
    padding-block: var(--s-8);
    margin-bottom: var(--s-9);
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--s-7);
    /* align-items: start (not stretch). With aspect-ratio on the image,
       stretch would let the image's height match the (taller) content
       column, then aspect-ratio forces width = height × 4/3, overflowing
       the 5fr column. align-items: start lets each cell size independently. */
    align-items: start;
    text-decoration: none;
    color: inherit;
    transition: background var(--motion-duration-content) var(--motion-ease-content);
  }
  .dispatch-featured:hover {
    background: var(--paper-warm);
  }
  .dispatch-featured:hover .dispatch-featured-headline {
    color: var(--accent);
  }
  @media (max-width: 880px) {
    .dispatch-featured {
      grid-template-columns: 1fr;
      gap: var(--s-5);
      padding-block: var(--s-6);
      margin-bottom: var(--s-8);
    }
  }

  /* Image well — Work-archive grammar. 4:3 paper-warm, "image" tag
     bottom-left in tracked-uppercase quiet sans.
     width: 100% locks the image to its grid column; aspect-ratio then
     computes height from width (correct direction). Without an explicit
     width, aspect-ratio could compute width from a stretched height
     and overflow the column. */
  .dispatch-featured-image {
    background: var(--paper-warm);
    width: 100%;
    aspect-ratio: 4/3;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
  }
  .dispatch-featured-image::before {
    content: "image";
    position: absolute;
    bottom: var(--s-3);
    left: var(--s-3);
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-quiet);
  }
  /* Ship v0.5.163 — suppress the "image" placeholder label when PHP
     renders an inline background-image URL on the featured-image div
     (archive-dispatch.php ~line 284). Same selector pattern as the
     v0.5.162 recap-faculty-portrait fix. Empty-fallback branch still
     shows the "image" label as a missing-content signal for editors. */
  .dispatch-featured-image[style*="background-image"]::before {
    content: none;
  }

  .dispatch-featured-content {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding-block: var(--s-3);
  }

  .dispatch-featured-label {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .dispatch-featured-headline {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.10;
    letter-spacing: -0.012em;
    color: var(--ink);
    max-width: 22ch;
    transition: color var(--motion-duration-content) var(--motion-ease-content);
  }
  .dispatch-featured-headline em { font-style: italic; }

  .dispatch-featured-summary {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 56ch;
  }
  .dispatch-featured-summary strong { font-weight: 600; color: var(--ink); }

  /* Featured byline — bigger portrait. Sits above the date-meta. */
  .dispatch-featured-byline {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-top: var(--s-3);
  }
  .dispatch-featured-byline .author-portrait {
    width: 56px;
    aspect-ratio: 4/5;
    flex-shrink: 0;
    border-radius: 3px;
    overflow: hidden;
  }
  .dispatch-featured-byline .author-name {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.3;
  }
  .dispatch-featured-byline .author-role {
    font-family: var(--serif);
    font-style: italic;
    font-size: 13px;
    color: var(--ink-quiet);
    margin-top: 2px;
  }

  .dispatch-featured-meta {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--rule-soft);
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink-quiet);
  }
  .dispatch-featured-meta strong {
    font-weight: 600;
    color: var(--ink-soft);
  }
  .dispatch-featured-meta .meta-sep {
    color: var(--ink-quiet);
  }


  /* ----------------------------------------------------------
     AUTHOR RAIL — sits between featured and grid

     Four voices, each with portrait + name + role + essay count.
     Inert in mockup; build wires each one to /author/<slug>/.
     Gives the corpus its bench-as-bylines identity at a glance.
  ---------------------------------------------------------- */
  .dispatch-authors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
    padding-block: var(--s-7);
    margin-bottom: var(--s-9);
    border-bottom: 1px solid var(--rule-soft);
  }
  @media (max-width: 880px) {
    .dispatch-authors {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--s-6) var(--s-4);
      padding-block: var(--s-6);
      margin-bottom: var(--s-8);
    }
  }
  @media (max-width: 540px) {
    .dispatch-authors {
      grid-template-columns: 1fr;
    }
  }

  .dispatch-author-rail-label {
    grid-column: 1 / -1;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-quiet);
    margin-bottom: var(--s-2);
  }

  .dispatch-author {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    text-decoration: none;
    color: inherit;
    transition: opacity var(--motion-duration-ui) var(--motion-ease-ui);
  }
  .dispatch-author:hover { opacity: 0.7; }
  .dispatch-author .author-portrait {
    width: 64px;
    aspect-ratio: 4/5;
    flex-shrink: 0;
    border-radius: 3px;
    overflow: hidden;
  }
  .dispatch-author-info {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding-top: var(--s-1);
  }
  .dispatch-author-info .name {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.25;
  }
  .dispatch-author-info .role {
    font-family: var(--serif);
    font-style: italic;
    font-size: 13px;
    color: var(--ink-quiet);
    line-height: 1.3;
  }
  .dispatch-author-info .count {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-quiet);
    margin-top: var(--s-2);
  }


  /* ----------------------------------------------------------
     YEAR GROUP — quiet horizontal rule + label

     Sits between groups. Sans-caps year, hairline rule.
     Roughly equivalent visual weight to the work-archive's
     work-archive-meta strip, but used as a structural divider.
  ---------------------------------------------------------- */
  .dispatch-year {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--s-4);
    align-items: center;
    margin-block: var(--s-7) var(--s-6);
  }
  .dispatch-year:first-child {
    margin-top: 0;
  }
  .dispatch-year-label {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .dispatch-year-rule {
    height: 1px;
    background: var(--rule);
  }


  /* ----------------------------------------------------------
     ARCHIVE GRID — 2-up, horizontal cards

     Card grammar inverts v1: portrait left (64px wide, 4:5 tall),
     content right. Authorship is first-class. Hover blooms a
     paper-warm fill to match the rest of the system's cards.
  ---------------------------------------------------------- */
  .dispatch-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-7) var(--s-7);
  }
  @media (max-width: 880px) {
    .dispatch-grid {
      grid-template-columns: 1fr;
      gap: var(--s-6);
    }
  }

  /* The .dispatch-card family and the .author-portrait base/gradient/
     initials/typographic family used to live here verbatim from canonical.
     Both lifted to base.css at v0.5.46 (op-learning #16) — they're
     shared with single-flibbrati.php and archive-flibbrati.php. Only
     the dispatch-archive-context overrides for typographic initials
     remain below. */

  /* Author rail variant scales the typographic initial up. */
  .dispatch-author .author-portrait.typographic .portrait-initials {
    font-size: 32px;
  }
  /* Featured byline (smaller portrait) scales it down. */
  .dispatch-featured-byline .author-portrait.typographic .portrait-initials {
    font-size: 22px;
  }


  /* ----------------------------------------------------------
     END-OF-ARCHIVE COLOPHON — quieter than v1, no CTA echo
  ---------------------------------------------------------- */
  .dispatch-end-note {
    margin-top: var(--s-9);
    padding-top: var(--s-7);
    border-top: 1px solid var(--rule-soft);
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-quiet);
    max-width: 60ch;
    margin-inline: auto;
  }
  .dispatch-end-note strong {
    font-style: normal;
    font-weight: 500;
    color: var(--ink-soft);
  }