/* Archive year and place pages and the compare tabs (archive-year.php, archive-place.php, shared/archive_pages.php).
   A ledger on paper: thick ink rule over each dataset, hairline rows, serif headings, tabular numbers, square corners, no
   cards. Tokens only (css/vf-tokens.css). Mobile first; rows stack on narrow screens, split into columns from 720px. */
.ay-main { --ay-gutter: 14px; }
.ay-crumb { margin: 0 0 10px; color: var(--vf-mute); font-size: .875rem; }
.ay-crumb a { color: var(--vf-blue-text); text-underline-offset: 3px; }

.ay-year, .ay-place { margin: 0 0 8px; color: var(--vf-ink); font: 700 clamp(3.4rem, 15vw, 6.5rem)/.95 var(--vf-font-head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ay-place { font-size: clamp(2.2rem, 9vw, 4rem); line-height: 1.02; overflow-wrap: anywhere; }
.ay-lede { max-width: 46rem; margin: 0 0 18px; color: var(--vf-ink-2); font: 400 1.1rem/1.5 var(--vf-font-head); }

/* previous / next and the decade strip */
.ay-steps { display: grid; gap: 12px; }
.ay-step-links { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 0; list-style: none; }
.ay-step-links li:empty { display: none; }
.ay-step-links a { display: inline-block; padding: 10px 0; color: var(--vf-blue-text); font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; }
.ay-decade ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--vf-rule-strong); background: var(--vf-surface); font-variant-numeric: tabular-nums; }
.ay-decade li { border-right: 1px solid var(--vf-rule-strong); border-bottom: 1px solid var(--vf-rule-strong); }
.ay-decade a, .ay-decade span { display: block; min-height: 44px; padding: 11px 4px; text-align: center; font: 600 1rem/1.2 var(--vf-font-head); }
.ay-decade a { color: var(--vf-blue-text); text-decoration: underline; text-underline-offset: 3px; }
.ay-decade .ay-here { background: var(--vf-ink); color: var(--vf-surface); }
.ay-decade .ay-off { color: var(--vf-mute); font-weight: 400; text-decoration: line-through; }
.ay-step-links .ay-off { padding: 10px 0; color: var(--vf-mute); font-size: .95rem; }
@media (min-width: 720px) { .ay-decade ol { grid-template-columns: repeat(10, minmax(0, 1fr)); max-width: 46rem; } }

/* headline strip */
.ay-strip { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border-bottom: 1px solid var(--vf-ink); background: var(--vf-surface); }
.ay-cell { padding: 12px var(--ay-gutter); border-bottom: 1px solid var(--vf-rule); }
.ay-cell:last-child { border-bottom: 0; }
.ay-cell dt { margin: 0 0 4px; color: var(--vf-gold-text); font: 700 .75rem/1.2 var(--vf-font-body); letter-spacing: .14em; text-transform: uppercase; }
.ay-cell dd { margin: 0 0 4px; color: var(--vf-ink); font: 700 1.2rem/1.25 var(--vf-font-head); overflow-wrap: anywhere; }
.ay-cell dd a { color: var(--vf-ink); text-decoration: underline; text-decoration-color: var(--vf-gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ay-cell dd span { display: block; margin-top: 2px; color: var(--vf-mute); font: 400 .85rem/1.35 var(--vf-font-body); }
.ay-strip-note { max-width: 46rem; margin: 8px 0 0; color: var(--vf-mute); font-size: .8125rem; line-height: 1.45; }
.ay-strip-note a { color: var(--vf-blue-text); }
@media (min-width: 720px) {
  .ay-strip { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .ay-cell { border-bottom: 0; border-right: 1px solid var(--vf-rule-strong); }
  .ay-cell:last-child { border-right: 0; }
}

/* place facts */
.ay-facts { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; background: var(--vf-surface); }
.ay-facts > div { display: grid; gap: 2px 16px; padding: 10px var(--ay-gutter); border-bottom: 1px solid var(--vf-rule); }
.ay-facts dt { color: var(--vf-mute); font: 700 .75rem/1.3 var(--vf-font-body); letter-spacing: .1em; text-transform: uppercase; }
.ay-facts dd { margin: 0; color: var(--vf-ink); font: 600 1.05rem/1.35 var(--vf-font-head); }
.ay-facts dd span { display: block; margin-top: 2px; color: var(--vf-mute); font: 400 .8125rem/1.4 var(--vf-font-body); }
.ay-facts dd a { color: var(--vf-blue-text); }
@media (min-width: 720px) { .ay-facts > div { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; } }

/* tools: go to, compare, elsewhere */
.ay-tools { display: grid; gap: 22px; }
.ay-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0; }
.ay-field { display: grid; gap: 4px; flex: 1 1 220px; min-width: 0; }
.ay-field label { color: var(--vf-mute); font: 700 .6875rem/1.3 var(--vf-font-body); letter-spacing: .08em; text-transform: uppercase; }
.ay-field input, .ay-field select { width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1px solid var(--vf-rule-strong); border-radius: 0; background: var(--vf-surface); color: var(--vf-ink); font: inherit; font-variant-numeric: tabular-nums; }
.ay-field input:focus-visible, .ay-field select:focus-visible { outline: 3px solid var(--vf-blue); outline-offset: 2px; }
.ay-form .btn { flex: 0 0 auto; min-height: 44px; }
.ay-vs { align-self: center; padding-top: 18px; color: var(--vf-mute); font: italic 400 1rem/1 var(--vf-font-head); }
@media (max-width: 719px) { .ay-vs { flex: 1 0 100%; padding-top: 0; } }
.ay-linkbox h2, .ay-toc span { margin: 0 0 6px; color: var(--vf-mute); font: 700 .75rem/1.3 var(--vf-font-body); letter-spacing: .12em; text-transform: uppercase; }
.ay-linkbox ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--vf-ink); }
.ay-linkbox li { display: grid; gap: 1px; padding: 9px 0; border-bottom: 1px solid var(--vf-rule); }
.ay-linkbox a { color: var(--vf-blue-text); font: 600 1rem/1.3 var(--vf-font-head); text-underline-offset: 3px; }
.ay-linkbox li span { color: var(--vf-mute); font-size: .8125rem; }
@media (min-width: 960px) { .ay-tools { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } .ay-tools > .ay-form:first-child { grid-column: 1 / -1; } }

/* contents list */
.ay-toc { margin: 0 0 26px; }
.ay-toc ul { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.ay-toc a { display: inline-block; padding: 9px 0; color: var(--vf-blue-text); font-size: .95rem; text-underline-offset: 3px; }

/* the ledger */
.ay-sec { margin: 0 0 34px; scroll-margin-top: 16px; }
.ay-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 18px; padding-top: 10px; }
.ay-sec-h h2 { margin: 0; color: var(--vf-ink); font: 700 1.35rem/1.2 var(--vf-font-head); text-wrap: balance; }
.ay-open { color: var(--vf-blue-text); font-size: .9rem; text-underline-offset: 3px; }
.ay-meta { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 4px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--vf-ink); color: var(--vf-mute); font-size: .8125rem; line-height: 1.45; }
.ay-meta a { color: var(--vf-blue-text); }
.ay-flag { color: var(--vf-ink); font-weight: 600; }
.ay-rows { margin: 0; padding: 0; list-style: none; }
.ay-row { display: grid; gap: 2px 18px; padding: 10px 0; border-bottom: 1px solid var(--vf-rule); font-variant-numeric: tabular-nums; }
.ay-l { color: var(--vf-ink); font: 600 1rem/1.35 var(--vf-font-head); overflow-wrap: anywhere; }
.ay-l a { color: var(--vf-blue-text); text-underline-offset: 3px; }
.ay-v { color: var(--vf-ink); font-size: .95rem; line-height: 1.45; }
.ay-n { color: var(--vf-mute); font-size: .8125rem; line-height: 1.45; overflow-wrap: anywhere; }
.ay-none { color: var(--vf-mute); font-style: italic; }
.ay-cite { color: var(--vf-blue-text); font-family: var(--vf-font-mono); font-size: .78rem; text-underline-offset: 2px; }
@media (min-width: 720px) {
  .ay-row { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: baseline; }
  .ay-n { grid-column: 2; }
}
.ay-trend { margin-top: 14px; }
.ay-trend .ac-fig { max-width: 720px; }

/* datasets with nothing here */
.ay-absent { margin: 40px 0 0; padding-top: 10px; }
.ay-absent h2 { margin: 0 0 4px; color: var(--vf-ink); font: 700 1.2rem/1.25 var(--vf-font-head); }
.ay-absent-lede { max-width: 46rem; margin: 0 0 10px; color: var(--vf-ink-2); font-size: .9375rem; line-height: 1.5; }
.ay-absent ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--vf-ink); }
.ay-absent li { display: grid; gap: 1px 18px; padding: 8px 0; border-bottom: 1px solid var(--vf-rule); }
.ay-absent a { color: var(--vf-blue-text); font: 600 .95rem/1.3 var(--vf-font-head); text-underline-offset: 3px; }
.ay-absent li span { color: var(--vf-mute); font-size: .875rem; line-height: 1.4; }
@media (min-width: 720px) { .ay-absent li { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: baseline; } }
.ay-empty, .ay-hint { max-width: 46rem; margin: 10px 0; padding: 12px 14px; background: var(--vf-surface); color: var(--vf-ink-2); }

/* compare tabs */
/* views: one pattern on every archive page, a ruled underline 44px tall */
.ay-tabs { margin: 18px 0 18px; border-bottom: 1px solid var(--vf-rule-strong); }
.ay-tabs ul, .ay-tabs ol { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 0; list-style: none; }
.ay-tabs a { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -1px; padding: 0 0 2px; border-bottom: 3px solid transparent; color: var(--vf-ink-2); font: 700 .98rem/1.2 var(--vf-font-body); text-decoration: none; }
.ay-tabs a:hover { color: var(--vf-ink); border-bottom-color: var(--vf-rule-strong); }
.ay-tabs a[aria-current="page"] { color: var(--vf-ink); border-bottom-color: var(--vf-ink); }
.ay-tabs a:focus-visible { outline: 3px solid var(--vf-blue); outline-offset: 2px; }
.ay-main .ay-form + .ac { margin-top: 26px; }
.ay-main .ay-form { margin-bottom: 16px; }

@media print { .ay-steps, .ay-tools, .ay-toc, .ay-tabs, .ay-form { display: none; } }

/* keep forms a readable width, and put the two year forms side by side */
.ay-form { max-width: 36rem; }
@media (min-width: 720px) { .ay-tools:not(:has(.ay-linkbox)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; } }
@media (max-width: 719px) { .ay-field { flex-basis: 100%; }  }

.ay-main .btn { border-radius: 0; }

/* tap targets: 44px on phones */
.ay-open, .ay-meta a { display: inline-flex; align-items: center; min-height: 44px; }
.ay-meta { gap: 0 16px; }