/*
 * After the Last Pickup, ProofServ's publication. Loaded after site.css and
 * built on its tokens, so it's plainly part of ProofServ: the same night
 * surfaces, morning paper and one blue accent. What makes it a publication
 * is the type. Headlines and body are set in a serif, with sans for the
 * furniture (kickers, bylines, tables, callouts). The night masthead is the
 * name taken literally: this is what operators read after the route.
 */
:root {
  --serif: "Iowan Old Style", "Charter", "Bitstream Charter", "Sitka Text", Cambria, ui-serif, Georgia, serif;
  --measure: 40rem;
}

/* ---------- Shared bits ---------- */
.pb-kicker { font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pb-rule {
  display: flex; align-items: center; gap: 16px; margin: clamp(56px, 8vw, 88px) 0 8px;
  font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.pb-rule::after { content: ""; flex: 1; height: 2px; background: var(--ink); }
.pb-draft { background: #fff7ed; border-bottom: 1px solid #fed7aa; color: #9a3412; font-size: 15px; padding: 12px 0; }

/* ---------- Masthead ---------- */
.pb-mast { position: relative; overflow: hidden; padding: clamp(56px, 9vw, 112px) 0 clamp(56px, 8vw, 96px); }
.pb-mast::before {
  /* The last streetlight on the route. */
  content: ""; position: absolute; left: 50%; top: -40%; width: 90%; height: 110%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(37, 99, 235, .22), rgba(37, 99, 235, 0) 70%);
  pointer-events: none;
}
.pb-mast .wrap { position: relative; text-align: center; }
.pb-mast__by { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--night-muted); }
.pb-mast__by a { color: var(--night-ink); text-decoration: none; }
.pb-mast__by a:hover { color: var(--night-accent); }
.pb-mast__title {
  margin: 22px auto 0; padding: 18px 0; max-width: 14ch;
  border-top: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line);
  font-family: var(--serif); font-weight: 700; font-size: clamp(48px, 9vw, 120px); line-height: .95; letter-spacing: -0.03em;
}
.pb-mast__title em { font-style: italic; font-weight: 400; color: var(--night-accent); }
.pb-mast__tag { margin-top: 20px; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.4vw, 26px); color: var(--night-ink); }
.pb-mast__intro { max-width: 36rem; margin: 36px auto 0; display: grid; gap: 14px; font-family: var(--serif); font-size: 19px; line-height: 1.6; color: var(--night-muted); text-align: left; }
.pb-mast__intro p:first-child { color: var(--night-ink); }

/* ---------- Front page ---------- */
.pb-front { padding: clamp(32px, 5vw, 56px) 0 clamp(64px, 9vw, 112px); }
.pb-feature {
  display: grid; gap: 14px; padding: clamp(28px, 5vw, 56px) 0;
  border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
}
.pb-feature__title { font-family: var(--serif); font-size: clamp(34px, 5.4vw, 68px); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; max-width: 18ch; }
.pb-feature:hover .pb-feature__title { color: var(--accent-ink); }
.pb-feature__dek { font-family: var(--serif); font-size: clamp(19px, 2vw, 23px); line-height: 1.5; color: var(--ink-2); max-width: 40rem; }

.pb-cards { list-style: none; display: grid; gap: 0 40px; }
@media (min-width: 760px) { .pb-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pb-cards { grid-template-columns: repeat(3, 1fr); } }
.pb-card a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px 0 28px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.pb-card__title { font-family: var(--serif); font-size: 25px; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }
.pb-card a:hover .pb-card__title { color: var(--accent-ink); }
.pb-card__desc { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.pb-card__meta { margin-top: auto; font-size: 14px; color: var(--ink-3); }

.pb-topics { padding-bottom: clamp(64px, 9vw, 112px); }
.pb-topics .wrap { display: grid; gap: 32px 40px; }
@media (min-width: 760px) { .pb-topics .wrap { grid-template-columns: repeat(2, 1fr); } .pb-topics .pb-rule { grid-column: 1 / -1; } }
.pb-topic h3 { font-family: var(--serif); font-size: 24px; }
.pb-topic p { margin-top: 6px; font-size: 16px; color: var(--ink-2); }
.pb-topic ul { list-style: none; margin-top: 12px; display: grid; gap: 8px; }
.pb-topic a { font-weight: 600; color: var(--ink); text-decoration: none; }
.pb-topic a:hover { color: var(--accent); }

/* ---------- Article head ---------- */
.pb-flag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding-bottom: 18px; margin-bottom: 28px; border-bottom: 1px solid var(--night-line); }
.pb-flag a { font-family: var(--serif); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--night-ink); text-decoration: none; }
.pb-flag a:hover { color: var(--night-accent); }
.pb-flag span { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--night-muted); }
.pb-crumbs a { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--night-accent); text-decoration: none; }
.pb-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pb-head h1 { max-width: 20ch; font-family: var(--serif); font-size: clamp(38px, 5.6vw, 68px); line-height: 1.04; letter-spacing: -0.02em; }
.pb-head .lede { max-width: 40rem; font-family: var(--serif); }
.pb-byline { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; color: var(--night-muted); }
.pb-byline span + span::before { content: "\00b7"; margin-right: 18px; color: var(--night-line); }

/* ---------- Article ---------- */
.pb-article { padding: clamp(48px, 7vw, 88px) 0 clamp(64px, 9vw, 112px); }
.pb-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1080px) {
  .pb-layout--toc { grid-template-columns: 220px minmax(0, var(--measure)); gap: 72px; justify-content: center; }
  .pb-toc { position: sticky; top: 100px; align-self: start; }
}
.pb-toc p { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.pb-toc ol { list-style: none; margin-top: 12px; display: grid; gap: 8px; border-left: 2px solid var(--line); padding-left: 16px; }
.pb-toc a { font-size: 15px; line-height: 1.4; color: var(--ink-2); text-decoration: none; }
.pb-toc a:hover { color: var(--accent); }
@media (max-width: 1079px) {
  .pb-toc { max-width: var(--measure); margin: 0 auto; width: 100%; padding: 20px 24px; background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--radius); }
  .pb-toc ol { border-left: 0; padding-left: 0; list-style: decimal inside; color: var(--ink-3); }
}

.pb-body { max-width: var(--measure); width: 100%; margin: 0 auto; font-family: var(--serif); font-size: 20px; line-height: 1.7; color: #27272a; }
.pb-body > * + * { margin-top: 1.1em; }
.pb-body > p:first-child::first-letter {
  float: left; margin: .08em .1em 0 0; font-size: 3.6em; line-height: .8; font-weight: 700; color: var(--ink);
}
.pb-body h2 { margin-top: 2.2em; font-family: var(--display); font-size: clamp(26px, 3vw, 32px); line-height: 1.15; letter-spacing: -0.025em; color: var(--ink); }
.pb-body h3 { margin-top: 1.8em; font-family: var(--display); font-size: 21px; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }
.pb-body h2 + *, .pb-body h3 + * { margin-top: .6em; }
.pb-body a { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent-soft); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pb-body a:hover { text-decoration-color: currentColor; }
.pb-body strong { color: var(--ink); font-weight: 700; }
.pb-body ul, .pb-body ol { padding-left: 1.3em; display: grid; gap: .45em; }
.pb-body li::marker { color: var(--ink-3); }
.pb-body code { font-size: .85em; background: var(--paper-2); padding: 2px 6px; border-radius: 6px; }
.pb-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.pb-body blockquote { margin-left: 0; padding-left: 20px; border-left: 3px solid var(--accent); color: var(--ink-2); font-style: italic; }
.pb-cite { font-family: var(--font); font-size: 12px; line-height: 0; margin-left: 1px; }
.pb-body .pb-cite a { text-decoration: none; font-weight: 700; padding: 0 2px; }

.pb-pull { margin: 2em 0 !important; padding: 26px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.pb-body .pb-pull blockquote { margin: 0; padding: 0; border: 0; font-family: var(--serif); font-style: italic; font-size: clamp(25px, 3vw, 32px); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }

.pb-checklist { list-style: none; padding-left: 0 !important; }
.pb-checklist li { position: relative; padding-left: 34px; }
.pb-checklist li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px;
  border: 2px solid var(--line-2); border-radius: 6px; background: var(--paper);
}

.pb-callout { font-family: var(--font); font-size: 17px; line-height: 1.6; padding: 20px 24px; border-radius: var(--radius); background: var(--paper-3); border: 1px solid var(--line); margin-top: 1.6em !important; }
.pb-callout > * + * { margin-top: .7em; }
.pb-callout__label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.pb-callout--assumptions { background: var(--accent-wash); border-color: var(--accent-soft); }
.pb-callout--assumptions .pb-callout__label { color: var(--accent-ink); }
.pb-callout--scenario { background: var(--paper); border-style: dashed; border-color: var(--line-2); }
.pb-callout--local { background: #fffbeb; border-color: #fde68a; }
.pb-callout--local .pb-callout__label { color: #92400e; }
.pb-callout ul, .pb-callout ol { padding-left: 1.2em; }

.pb-table { overflow-x: auto; font-family: var(--font); font-size: 16px; line-height: 1.45; margin-top: 1.4em !important; border: 1px solid var(--line); border-radius: var(--radius); }
.pb-table table { width: 100%; border-collapse: collapse; }
.pb-table th, .pb-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.pb-table th { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); background: var(--paper-3); }
.pb-table tr:last-child td { border-bottom: 0; }
.pb-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pb-cta { font-family: var(--font); margin-top: 2.6em !important; padding: 28px; border-radius: var(--radius-lg); background: var(--night); color: var(--night-ink); }
.pb-cta .pb-cta__k { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--night-accent); }
.pb-cta .pb-cta__h { margin-top: 10px !important; font-family: var(--display); font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.pb-cta p { font-size: 17px; line-height: 1.55; }
.pb-cta p:not(.pb-cta__k):not(.pb-cta__h) { margin-top: 8px; color: var(--night-muted); }
.pb-cta .actions { margin-top: 20px; }
.pb-cta .btn { color: #fff; text-decoration: none; }
.pb-cta .btn--lg { min-height: 48px; font-size: 16px; padding: 0 22px; }
.pb-cta .btn--quiet { color: var(--night-ink); border-color: var(--night-line); }
.pb-cta .btn--quiet:hover { background: var(--night-2); }
.pb-cta .text-link { color: var(--night-accent); text-decoration: none; }

.pb-sources { font-family: var(--font); margin-top: 3em !important; padding-top: 28px; border-top: 1px solid var(--line); }
.pb-sources h2 { margin-top: 0; font-size: 20px; }
.pb-sources ol { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-2); gap: 10px; }
.pb-sources li:target { background: var(--accent-wash); border-radius: 6px; }
.pb-sources__note { display: block; color: var(--ink-3); }
.pb-fine { font-family: var(--font); font-size: 14px !important; line-height: 1.55; color: var(--ink-3); margin-top: 28px !important; }

.pb-related { padding: clamp(48px, 7vw, 80px) 0; background: var(--paper-3); border-top: 1px solid var(--line); }
.pb-related .pb-rule { margin-top: 0; }

@media print {
  .site-header, .site-footer, .pb-toc, .pb-cta, .pb-related { display: none; }
  .pb-body { font-size: 12pt; }
}

/* ---------- Sections and the Toolkit ---------- */
.pb-sections { display: inline-flex; gap: 4px; margin-top: 36px; padding: 4px; border: 1px solid var(--night-line); border-radius: 999px; }
.pb-sections a { padding: 8px 18px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--night-muted); text-decoration: none; }
.pb-sections a:hover { color: var(--night-ink); }
.pb-sections a[aria-current="page"] { background: var(--night-2); color: var(--night-ink); }
.pb-mast--sub .pb-mast__title { font-size: clamp(44px, 7vw, 88px); }
.pb-more { margin-top: 20px; }

.pb-template { margin-top: 1.6em !important; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; font-family: var(--font); }
.pb-template__bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--paper-2); border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.pb-template__actions { display: none; gap: 8px; }
.pb-tools .pb-template__actions { display: inline-flex; }
.pb-tbtn {
  font: inherit; font-size: 14px; font-weight: 650; letter-spacing: 0; text-transform: none;
  min-height: 36px; padding: 0 14px; border-radius: 8px; cursor: pointer;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line-2);
}
.pb-tbtn:hover { border-color: var(--accent); color: var(--accent-ink); }
.pb-template__body { padding: 22px 24px; font-size: 17px; line-height: 1.6; background: var(--paper); }
.pb-template__body > * + * { margin-top: .8em; }
.pb-template__body h2, .pb-template__body h3 { margin-top: 1.4em; font-size: 19px; }
.pb-template__body h2:first-child, .pb-template__body h3:first-child { margin-top: 0; }
@media print {
  .pb-template { border: 0; }
  .pb-template__bar { display: none; }
}
