/* Atomic Shelf Dispatch — editorial styling.
 *
 * Shared by the index and every article page so a Dispatch article cannot look
 * different from the index that links to it. Written once, here, rather than
 * inlined per page.
 *
 * Contrast values are the same corrected set the rest of the site uses: these
 * carry small text, so --muted and the copper accent are both dark enough to
 * reach WCAG AA on the surfaces below.
 */

:root {
  --ink:          var(--espresso);
  --cream:        var(--oat);
  --warm:         var(--parchment);
  --card:         var(--oat);
  --border:       var(--dust);
  --copper:       var(--amber-deep);
  --copper-2:     var(--amber-deep);
  --muted:        var(--ink-soft);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--face-meta);line-height:1.65;
}

nav[aria-label="Primary"]{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.25rem;border-bottom:1px solid var(--border);
}
.logo{font-family:var(--face-text);font-size:1.35rem;font-weight:700;color:var(--ink);text-decoration:none;}
.logo-dash{color:var(--copper);}
.nav-back{display:inline-flex;align-items:center;gap:.4rem;color:var(--copper);text-decoration:none;font-weight:600;font-size:.92rem;}
.nav-back:hover{text-decoration:underline;}
.nav-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;}
.logo:focus-visible,.nav-back:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:4px;}

main{padding:clamp(1.5rem,4vw,3rem) 1.25rem 4rem;}
.dispatch-wrap{max-width:46rem;margin:0 auto;}

.dispatch-eyebrow{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--copper);font-weight:700;margin:0 0 .6rem;
}
h1{
  font-family:var(--face-text);font-weight:600;
  font-size:clamp(1.9rem,5vw,2.8rem);line-height:1.14;margin:0 0 .7rem;
}
h1 em{color:var(--copper);font-style:italic;}
h2{font-family:var(--face-text);font-weight:600;font-size:1.4rem;margin:2rem 0 .6rem;}
h3{font-size:1.1rem;margin:0 0 .3rem;}

.dispatch-lede,.dispatch-article-excerpt{font-size:1.05rem;color:var(--muted);margin:0 0 1.5rem;}

.dispatch-hero{margin-bottom:2.5rem;}
.dispatch-group{margin-bottom:2.5rem;}
.dispatch-group-heading{margin:0 0 .2rem;border-bottom:1px solid var(--border);padding-bottom:.4rem;}
.dispatch-group-blurb{font-size:.9rem;color:var(--muted);margin:0 0 1rem;}

.dispatch-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem;}
.dispatch-card{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:1rem 1.15rem;
}
.dispatch-card-meta{font-size:.78rem;color:var(--muted);margin:0 0 .3rem;}
.dispatch-card-cat{color:var(--copper-2);font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.dispatch-card-title a{color:var(--ink);text-decoration:none;}
.dispatch-card-title a:hover{text-decoration:underline;color:var(--copper);}
.dispatch-card-title a:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:3px;}
.dispatch-card-excerpt{margin:0;font-size:.94rem;color:var(--muted);}

.dispatch-breadcrumb{font-size:.86rem;color:var(--muted);margin:0 0 1.25rem;}
.dispatch-breadcrumb a{color:var(--copper);}
.dispatch-breadcrumb span{margin:0 .4rem;}

.dispatch-article-meta{font-size:.86rem;color:var(--muted);margin:0 0 .9rem;}
.dispatch-updated{margin:.3rem 0 0;}
.dispatch-body p{margin:0 0 1.05rem;}
.dispatch-body a{color:var(--copper);}
.dispatch-body a:focus-visible{outline:2px solid var(--copper);outline-offset:2px;border-radius:3px;}
.dispatch-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  background:var(--warm);padding:.1em .35em;border-radius:4px;
}

/* Sources are visually distinct from the article body: an attributed claim is
   not the same kind of statement as our own copy, and a reader should be able
   to see at a glance which is which. */
.dispatch-sources{
  margin-top:2.5rem;padding:1rem 1.15rem;background:var(--warm);
  border:1px solid var(--border);border-radius:10px;
}
.dispatch-sources h2{margin:0 0 .4rem;font-size:1.15rem;}
.dispatch-sources p{font-size:.9rem;color:var(--muted);margin:0 0 .5rem;}
.dispatch-sources ul{margin:0;padding-left:1.1rem;font-size:.92rem;}
.dispatch-sources a{color:var(--copper-2);}

.dispatch-note{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--border);
}
.dispatch-note h2{font-size:1.15rem;margin:0 0 .4rem;}
.dispatch-note p{font-size:.92rem;color:var(--muted);margin:0;}

.dispatch-more{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--border);}
.dispatch-more a{color:var(--copper);font-weight:600;}
.dispatch-more a:focus-visible{outline:2px solid var(--copper);outline-offset:2px;border-radius:3px;}

@media (max-width:520px){
  nav[aria-label="Primary"]{padding:.85rem 1rem;}
  main{padding:1.25rem 1rem 3rem;}
}
/* Dispatch section hub - links to the guides library and across the site. */
.dispatch-hub{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:baseline;
  margin:0 0 2.5rem;padding:0.875rem 1rem;
  border:1px solid var(--rule,var(--rule));background:var(--paper-sunk,var(--paper-sunk));
}
.dispatch-hub a{
  font-family:var(--face-meta,ui-monospace),monospace;font-size:.8125rem;
  letter-spacing:.04em;text-decoration:none;color:var(--ink,var(--ink));
  border-bottom:1px solid var(--ink,var(--ink));padding-bottom:2px;
}
.dispatch-hub a:hover{color:var(--shelf,var(--shelf));border-bottom-color:var(--shelf,var(--shelf));}