/* Sell-to pages (/sell-to/, built by tools/atlas/build_atlas.py). Loaded after makers.css.
   One hue (brass) on tinted greys, 1px hairlines, no shadows; radius 8 for chips, 12 for cards; hover 80ms.
   Facts carry a small numbered source mark; the numbered Sources list closes each page. */
.at { --at-line: var(--rule); --at-soft: #f7f5f1; }

/* At a glance: four quiet figures under the lead */
.at .at-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 2rem; border: 1px solid var(--at-line); border-radius: 12px; font-family: var(--sans); }
.at .at-glance > div { padding: 0.9rem 1rem; min-width: 0; }
.at .at-glance > div + div { border-left: 1px solid var(--at-line); }
.at .at-glance dt { font-size: 0.8125rem; color: var(--muted); }
.at .at-glance dd { margin-top: 0.3rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }

/* On this page / regions: a row of quiet chips */
.at .at-jump { margin-top: 1.25rem; }
.at .at-jump ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; }
.at .at-jump li { margin: 0; }
.at .at-jump a { display: inline-flex; align-items: center; gap: 0.4rem; height: 2rem; padding: 0 0.75rem; border: 1px solid var(--at-line); border-radius: 8px; font-family: var(--sans); font-size: 0.8125rem; font-weight: 500; color: var(--ink); text-decoration: none; transition: border-color 80ms, color 80ms; }
.at .at-jump a:hover { border-color: var(--brass); color: var(--brass); }
.at .at-jump a span { color: var(--muted); font-variant-numeric: tabular-nums; }

/* The headline figure: brass rule, large sans */
.at .at-key { margin: 2.5rem 0 0; padding-top: 1rem; border-top: 2px solid var(--brass); }
.at .at-key p { font-family: var(--sans); font-size: 1.375rem; line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }

/* Sections and facts */
.at .at-sec { margin-top: 3rem; scroll-margin-top: 5rem; }
.at .at-sec h2 { margin: 0 0 0.5rem; text-wrap: balance; }
.at .at-facts { list-style: none; padding: 0; margin: 0; }
.at .at-facts li { margin: 0; padding: 0.9rem 0 0.9rem 1.25rem; border-bottom: 1px solid var(--at-line); position: relative; font-size: 1.0625rem; line-height: 1.6; }
.at .at-facts li::before { content: ""; position: absolute; left: 0; top: 1.55rem; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); opacity: .55; }
.at .at-facts li:last-child { border-bottom: 0; }

/* Numbered source mark after each fact */
.at a.at-ref { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; margin-left: 0.3rem; padding: 0 0.3rem; vertical-align: 0.15em; border-radius: 4px; background: var(--at-soft); font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; line-height: 1; color: var(--muted); text-decoration: none; transition: background 80ms, color 80ms; }
.at a.at-ref:hover { background: var(--brass); color: #fff; }

/* Sources list */
.at .at-sources ol { margin: 0; padding: 0; list-style: none; counter-reset: s; font-family: var(--sans); font-size: 0.8125rem; line-height: 1.45; }
.at .at-sources li { counter-increment: s; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: 0.25rem; margin: 0; padding: 0.45rem 0; border-bottom: 1px solid var(--at-line); }
.at .at-sources li::before { content: counter(s); color: var(--muted); font-variant-numeric: tabular-nums; }
.at .at-sources a.at-src { display: inline-block; padding-block: 0.25rem; margin-block: -0.25rem; color: var(--ink); text-decoration: none; }
.at .at-sources a.at-src:hover { color: var(--brass); text-decoration: underline; text-underline-offset: 0.2em; }
.at .at-sources li span { grid-column: 2; color: var(--muted); }
.at .at-note { margin-top: 2rem; font-family: var(--sans); font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
.at .at-note a { display: inline-block; padding-block: 0.25rem; margin-block: -0.25rem; color: var(--ink); }
.at .faq p a { color: var(--ink); text-decoration-color: var(--rule-strong); text-underline-offset: 0.2em; white-space: nowrap; }

/* Country cards (index and "more in region") */
.at .at-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; padding: 0; margin: 1rem 0 0; }
.at .at-cards li { margin: 0; }
.at a.at-card { display: flex; flex-direction: column; gap: 0.4rem; height: 100%; padding: 1rem; border: 1px solid var(--at-line); border-radius: 12px; font-family: var(--sans); color: var(--ink); text-decoration: none; transition: border-color 80ms; }
.at a.at-card:hover { border-color: var(--brass); }
.at .at-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.at .at-card-h b { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.at .at-card-h i { font-style: normal; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: var(--brass); }
.at .at-card-t { font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }
.at .at-more { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--at-line); }

/* Index: three example figures, then regions */
.at .at-examples { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; padding: 0; margin: 2rem 0 0; }
.at .at-examples li { margin: 0; padding: 1rem; border-top: 2px solid var(--brass); background: var(--at-soft); border-radius: 0 0 12px 12px; display: flex; flex-direction: column; gap: 0.75rem; }
.at .at-examples a.at-ex-c { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; color: var(--brass); text-decoration: none; }
.at .at-examples a.at-ex-c:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.at .at-examples p { font-family: var(--sans); font-size: 0.9375rem; line-height: 1.45; font-weight: 500; color: var(--ink); }
.at .at-examples a.at-src { display: inline-block; padding-block: 0.25rem; margin-block: -0.25rem; font-family: var(--sans); font-size: 0.75rem; color: var(--muted); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 0.2em; }
.at .at-region { margin-top: 3rem; scroll-margin-top: 5rem; }
.at .at-region h2 { margin: 0; padding-bottom: 0.5rem; border-bottom: 1px solid var(--ink); }

@media (max-width: 720px) {
  .at .at-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at .at-glance > div:nth-child(3) { border-left: 0; }
  .at .at-glance > div:nth-child(n+3) { border-top: 1px solid var(--at-line); }
  .at .at-examples { grid-template-columns: 1fr; }
  .at .at-examples li:nth-child(n+2) { display: none; }
  .at .story-body .faq li { grid-template-columns: 1fr; }
  .at .story-body .faq li::before { grid-row: auto; font-size: 0.9375rem; line-height: 1.2; }
  .at .at-key p { font-size: 1.1875rem; }
}