:root {
  --navy: #071d2c;
  --navy-2: #102f43;
  --blue: #315e70;
  --sage: #9ca994;
  --ivory: #f4efe1;
  --paper: #fbf8ef;
  --white: #fffdf8;
  --ink: #15242a;
  --muted: #66706d;
  --gold: #b78b3e;
  --line: rgba(21, 36, 42, .16);
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: Inter, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --max: 1320px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; overflow-x: hidden; }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.6; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.shell { width: min(calc(100% - 64px), var(--max)); margin-inline: auto; }

.site-header { position: relative; z-index: 20; color: #fff; background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.13); }
.header-inner { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.brand-mark { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; font-family: var(--serif); font-size: 13px; }
.site-header nav { display: flex; align-items: center; gap: 24px; }
.site-header nav a { padding: 22px 0 19px; color: rgba(255,255,255,.72); border-bottom: 2px solid transparent; text-decoration: none; font-size: 10px; letter-spacing: .075em; }
.site-header nav a:hover { color: #fff; border-color: var(--gold); }
.site-header .locale { min-width: 56px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 99px; text-align: center; }

.hero { position: relative; isolation: isolate; height: 500px; overflow: hidden; background: #e9e5d8; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(252,248,237,.34) 0%, rgba(250,246,234,.17) 27%, rgba(248,243,229,.05) 43%, rgba(244,239,224,0) 55%), linear-gradient(to bottom, rgba(7,29,44,0) 72%, rgba(7,29,44,.09) 100%); }
.hero-landscape { position: absolute; inset: 0; z-index: -2; background: url("/assets/atb/05c0ff0c1486f143be22.png") center center / cover no-repeat; }
.hero-inner { position: relative; height: 500px; display: grid; grid-template-columns: 42% 58%; gap: 0; align-items: center; }
.hero-copy { position: relative; z-index: 6; width: min(520px, 100%); transform: translateY(-24px); }
.breadcrumbs { display: none; }
.eyebrow { margin: 0 0 11px; color: #8c662c; font-size: 9px; font-weight: 850; letter-spacing: .19em; text-transform: uppercase; }
.hero .eyebrow { display: block; max-width: 430px; margin-bottom: 15px; }
.hero h1 { margin: 0; max-width: 460px; font: 400 clamp(57px, 4.8vw, 70px)/.9 var(--serif); letter-spacing: -.048em; }
.hero-sub { max-width: 430px; margin: 13px 0 0; color: #293a40; font: 400 clamp(20px, 1.7vw, 25px)/1.12 var(--serif); }
.hero-dek { max-width: 420px; margin: 13px 0 0; color: #435450; font-size: 12px; line-height: 1.45; }
.button { width: max-content; margin-top: 17px; display: flex; align-items: center; gap: 13px; color: var(--navy); border-bottom: 1px solid var(--gold); text-decoration: none; font-size: 9px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.button span { color: #8c662c; font-size: 13px; }
.hero-coins { position: relative; min-height: 470px; align-self: center; isolation: isolate; }
.coin { position: absolute; aspect-ratio: 1; object-fit: contain; border-radius: 50%; background: rgba(255,255,255,.9); filter: drop-shadow(0 15px 14px rgba(8,28,37,.25)); }
.coin-shawnee { z-index: 3; left: 10%; top: 12px; width: 285px; transform: rotate(-2deg); }
.coin-war { z-index: 2; right: 0; top: 30px; width: 255px; transform: rotate(2deg); }
.coin-hot { z-index: 5; left: 31%; top: 217px; width: 265px; transform: rotate(-1deg); }
.coin-tuskegee { z-index: 4; right: -2%; bottom: 0; width: 245px; transform: rotate(1deg); }

.fact-ribbon { color: #fff; background: var(--navy); }
.facts { display: grid; grid-template-columns: repeat(5, 1fr); }
.facts > div { min-height: 80px; padding: 12px 26px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(255,255,255,.14); }
.facts > div:last-child { border-right: 1px solid rgba(255,255,255,.14); }
.facts span { color: rgba(255,255,255,.55); font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.facts strong { margin-top: 5px; font: 400 22px/1.1 var(--serif); }

.section { padding: 96px 0; }
.section-head { margin-bottom: 58px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); gap: 70px; align-items: end; }
.section-head h2, .geography h2, .source-grid h2 { max-width: 770px; margin: 0; font: 400 clamp(42px, 4.5vw, 66px)/.98 var(--serif); letter-spacing: -.042em; }
.section-head > p, .lead { max-width: 570px; margin: 0; color: var(--muted); font-size: 15px; }

.origin { padding: 88px 0 84px; background: var(--paper); }
.scale-comparison { max-width: 990px; margin: 0 auto; display: grid; grid-template-columns: .66fr .38fr 1.2fr; align-items: center; gap: 38px; }
.scale-comparison figure { margin: 0; }
.coin-stage { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background: #fff; border-radius: 50%; box-shadow: 0 18px 45px rgba(31,42,42,.12); }
.coin-stage img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.scale-quarter { max-width: 210px; justify-self: end; }
.scale-bullion { max-width: 425px; }
.scale-comparison figcaption { margin-top: 15px; display: flex; justify-content: space-between; gap: 12px; color: #65706d; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.scale-comparison figcaption strong { color: var(--ink); }
.scale-arrow { display: flex; flex-direction: column; align-items: center; color: #8b672e; font-size: 11px; font-weight: 800; letter-spacing: .11em; }
.scale-arrow i { position: relative; width: 100%; height: 1px; margin: 13px 0; background: var(--gold); }
.scale-arrow i::after { content: ""; position: absolute; right: 0; top: -4px; border-left: 8px solid var(--gold); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.scale-arrow small { color: var(--muted); font-size: 8px; text-align: center; }
.edge-note { max-width: 620px; margin: 33px auto 0; padding-top: 17px; color: var(--muted); border-top: 1px solid var(--line); font-size: 11px; text-align: center; }

.geography { overflow: hidden; color: #fff; background: var(--navy-2); }
.geography-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 72px; align-items: center; }
.geography .eyebrow, .stories .eyebrow { color: #d8b777; }
.geography .lead { margin-top: 26px; color: rgba(255,255,255,.68); }
.geo-key { margin-top: 38px; display: flex; gap: 28px; }
.geo-key span { min-width: 96px; color: rgba(255,255,255,.55); font-size: 8px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.geo-key b { display: block; color: #fff; font: 400 33px/1 var(--serif); }
.map-art { position: relative; min-height: 430px; display: flex; flex-direction: column; justify-content: center; }
.map-art::before, .map-art::after { content: ""; position: absolute; inset: 6% -4%; opacity: .18; background: repeating-radial-gradient(ellipse at 58% 46%, transparent 0 21px, rgba(255,255,255,.45) 22px, transparent 23px); transform: rotate(-4deg); }
.map-art::after { inset: 22% 8%; opacity: .11; transform: rotate(7deg); }
.map-main { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px 10px; transform: skewX(-5deg) rotate(-1deg); }
.map-main span { min-height: 26px; display: grid; place-items: center; color: rgba(255,255,255,.68); border-bottom: 1px solid rgba(255,255,255,.16); font-size: 7px; font-weight: 800; }
.map-main span:nth-child(3n) { transform: translateY(11px); }
.map-main span:nth-child(5n) { color: #d7c49d; border-color: rgba(216,183,119,.42); }
.map-main .dc { color: #d5ad64; border-color: #d5ad64; }
.territories { position: relative; z-index: 1; margin: 37px 0 0 13%; padding: 14px 18px; display: flex; flex-direction: column; gap: 9px; border-left: 2px solid var(--gold); }
.territories b { color: #d8b777; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.territories span { color: rgba(255,255,255,.68); font-size: 11px; }

.archive { background: var(--ivory); }
.archive-track { position: relative; margin: -16px 0 30px; display: grid; grid-template-columns: repeat(12, 1fr); color: #80662f; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-align: center; }
.archive-track::before { content: ""; position: absolute; left: 3.8%; right: 3.8%; top: 50%; height: 1px; background: rgba(128,102,47,.36); }
.archive-track span { position: relative; background: var(--ivory); }
.archive-grid { border-top: 1px solid rgba(21,36,42,.22); }
.year-group { min-height: 154px; display: grid; grid-template-columns: 160px 1fr; gap: 0; border-bottom: 1px solid rgba(21,36,42,.16); }
.year-group > header { position: relative; padding: 4px 22px 0 0; display: flex; flex-direction: column; border-right: 1px solid rgba(183,139,62,.42); }
.year-group > header { padding-top: 25px; }
.year-group > header span { font: 400 29px/1 var(--serif); }
.year-group > header small { margin-top: 8px; color: #826a3d; font-size: 8px; font-weight: 800; letter-spacing: .11em; }
.year-group > header b { margin-top: auto; padding-bottom: 24px; color: #68736f; font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.year-group > header i { position: absolute; right: -5px; top: 11px; width: 9px; height: 9px; background: var(--ivory); border: 1px solid var(--gold); border-radius: 50%; }
.issue-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: repeating-linear-gradient(90deg, transparent 0, transparent calc(20% - 1px), rgba(21,36,42,.08) calc(20% - 1px), rgba(21,36,42,.08) 20%); }
.issue-cell { position: relative; min-width: 0; min-height: 153px; padding: 25px 31px 23px 21px; display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
.issue-sequence { color: #80662f; font: 400 21px/1 var(--serif); }
.issue-jurisdiction { margin-top: 12px; color: #6d7773; font-size: 7px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.issue-cell h3 { margin: 6px 0 0; font: 600 13px/1.25 var(--serif); }
.issue-arrow { position: absolute; right: 16px; bottom: 19px; color: #9a7435; font-size: 11px; opacity: .72; transition: color .16s ease, opacity .16s ease, transform .16s ease; }
.issue-link { transition: color .16s ease, background-color .16s ease; }
.issue-link:hover { color: #72501f; background: rgba(255,255,255,.54); }
.issue-link:hover .issue-arrow,.issue-link:focus-visible .issue-arrow { color: #72501f; opacity: 1; transform: translateX(2px); }
.issue-link:focus-visible { z-index: 2; outline: 3px solid #1d6578; outline-offset: -4px; background: #fff; }
.design-band { margin: 20px 0 34px 160px; padding: 18px 22px; display: grid; grid-template-columns: 142px 1fr; gap: 22px; align-items: center; background: #0e3446; }
.design-band-copy { color: #fff; }
.design-band-copy span { display: block; color: #d8b777; font-size: 8px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.design-band-copy strong { display: block; margin-top: 8px; font: 400 22px/1 var(--serif); }
.design-band-images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.design-band figure { margin: 0; display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; }
.design-band img { width: 58px; height: 58px; object-fit: contain; border-radius: 50%; background: #fff; }
.design-band figcaption { color: rgba(255,255,255,.72); font-size: 8px; line-height: 1.35; }

.stories { color: var(--ink); background: var(--paper); }
.stories .section-head.light h2 { color: var(--ink); }
.story-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.story { min-width: 0; border-top: 1px solid var(--gold); }
.story-image { position: relative; isolation: isolate; min-height: 230px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, #89a7a2, #294f5f 55%, #102b3b); }
.story:nth-child(2) .story-image { background: radial-gradient(circle at 70% 30%, #a3aa8b, #4a6959 58%, #183b43); }
.story:nth-child(3) .story-image { background: radial-gradient(circle at 40% 20%, #ad9d81, #5b6d69 53%, #203e4b); }
.story:nth-child(4) .story-image { background: radial-gradient(circle at 70% 20%, #9dafb6, #465f6c 58%, #182f42); }
.story-image img { position: relative; z-index: 2; width: 79%; border-radius: 50%; mix-blend-mode: screen; filter: drop-shadow(0 15px 17px rgba(0,0,0,.28)); opacity: .9; }
.contours { position: absolute; inset: -20%; z-index: 1; opacity: .3; background: repeating-radial-gradient(ellipse at 60% 40%, transparent 0 21px, rgba(255,255,255,.36) 22px, transparent 23px); }
.story-copy { padding: 20px 4px 0; }
.story-copy > span { color: #8c662c; font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.story-copy h3 { margin: 9px 0 8px; font: 400 25px/1.05 var(--serif); }
.story-copy p { margin: 0; color: var(--muted); font-size: 11px; }

.versions { padding: 78px 0; background: var(--paper); border-top: 1px solid var(--line); }
.versions .section-head { margin-bottom: 34px; }
.version-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.version-cards article { padding: 29px 34px; background: var(--paper); }
.version-cards article.active { color: #fff; background: var(--navy-2); }
.version-cards article > span { color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.version-cards h3 { margin: 16px 0 8px; font: 400 27px/1.1 var(--serif); }
.version-cards p { margin: 0; color: var(--muted); font-size: 12px; }
.version-cards .active p { color: rgba(255,255,255,.65); }

.sources { padding: 84px 0; background: #e8dfca; }
.source-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; }
.source-grid > div > p { margin: 0 0 26px; color: #55605c; font-size: 14px; }
.source-grid ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.source-grid li { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.source-grid a { text-decoration: none; }
.source-grid a:hover { text-decoration: underline; }
.closing { padding: 82px 0; color: #fff; background: var(--navy); }
.closing .shell { min-height: 205px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.closing p { max-width: 820px; margin: 0; font: 400 clamp(40px, 5vw, 70px)/1.01 var(--serif); letter-spacing: -.04em; }
.closing a { margin-top: 27px; color: #d8b777; text-decoration: none; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
footer { color: rgba(255,255,255,.6); background: #04141f; }
footer .shell { min-height: 74px; display: flex; align-items: center; justify-content: space-between; font-size: 9px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }

@media (max-width: 1100px) {
  .site-header nav a:not(.locale) { display: none; }
  .hero-inner { grid-template-columns: 390px minmax(0,1fr); }
  .hero-copy { width: 390px; }
  .hero h1 { font-size: 58px; }
  .coin-shawnee { left: 3%; width: 225px; }
  .coin-war { right: -2%; width: 215px; }
  .coin-hot { left: 25%; top: 235px; width: 220px; }
  .coin-tuskegee { right: -5%; width: 205px; }
  .year-group { grid-template-columns: 126px 1fr; }
  .issue-cell { padding-inline: 15px 28px; }
  .design-band { margin-left: 126px; grid-template-columns: 110px 1fr; }
  .story-grid { grid-template-columns: repeat(2, 1fr); }
  .story-image { min-height: 280px; }
}

@media (max-width: 780px) {
  .shell { width: min(calc(100% - 28px), var(--max)); }
  .header-inner { height: 60px; }
  .hero { height: 500px; }
  .hero-inner { height: 500px; display: block; }
  .hero-copy { width: 100%; padding-top: 17px; transform: none; }
  .breadcrumbs { margin-bottom: 8px; font-size: 7px; }
  .hero h1 { max-width: 350px; font-size: 46px; line-height: .88; letter-spacing: -.045em; }
  html[lang="zh-CN"] .hero h1 { font-size: 43px; line-height: .95; }
  .hero-sub { max-width: 340px; margin-top: 9px; font-size: 17px; line-height: 1.18; }
  .hero-dek { display: none; }
  .button { display: none; }
  .hero-coins { position: absolute; left: 14px; right: 14px; top: 195px; min-height: 300px; }
  .coin { filter: drop-shadow(0 10px 10px rgba(8,28,37,.24)); }
  .coin-shawnee { left: 0; top: 0; width: 154px; transform: rotate(-2deg); }
  .coin-war { right: 0; top: 8px; width: 150px; transform: rotate(2deg); }
  .coin-hot { left: 14%; top: 138px; width: 158px; transform: rotate(-1deg); }
  .coin-tuskegee { right: 5%; bottom: 0; width: 150px; transform: rotate(1deg); }
  .hero-landscape { background-position: 64% center; }
  .hero::after { background: linear-gradient(to bottom, rgba(252,248,237,.35) 0%, rgba(249,244,231,.18) 28%, rgba(244,239,224,.04) 52%, rgba(7,29,44,.08) 100%), linear-gradient(90deg, rgba(252,248,237,.1), rgba(252,248,237,0) 58%); }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts > div { min-height: 68px; padding: 9px 14px; }
  .facts > div:last-child { grid-column: 1 / -1; min-height: 66px; }
  .facts span { font-size: 7px; }
  .facts strong { font-size: 18px; }
  .section { padding: 66px 0; }
  .section-head { margin-bottom: 40px; grid-template-columns: 1fr; gap: 20px; }
  .section-head h2, .geography h2, .source-grid h2 { font-size: 39px; }
  .section-head > p, .lead { font-size: 13px; }
  .origin { padding: 55px 0 60px; }
  .origin .section-head { margin-bottom: 30px; }
  .scale-comparison { grid-template-columns: .68fr .27fr 1.05fr; gap: 10px; }
  .scale-comparison figcaption { display: block; font-size: 7px; }
  .scale-comparison figcaption span { display: block; margin-top: 3px; }
  .scale-arrow { font-size: 8px; }
  .scale-arrow small { display: none; }
  .edge-note { margin-top: 24px; }
  .geography-grid, .source-grid { grid-template-columns: 1fr; gap: 38px; }
  .geo-key { margin-top: 26px; gap: 12px; }
  .geo-key span { min-width: 0; width: 31%; }
  .map-art { min-height: 300px; }
  .map-main { gap: 2px 5px; }
  .map-main span { min-height: 19px; font-size: 5px; }
  .territories { margin-top: 27px; }
  .archive-track { margin-top: -5px; overflow: hidden; font-size: 6px; }
  .archive-track span:nth-child(even) { visibility: hidden; }
  .year-group { min-height: 0; padding: 17px 0; grid-template-columns: 1fr; gap: 13px; }
  .year-group > header { min-height: 45px; padding: 0 0 12px; display: grid; grid-template-columns: auto auto 1fr; gap: 11px; align-items: baseline; border-right: 0; border-bottom: 1px solid rgba(183,139,62,.42); }
  .year-group > header span { font-size: 22px; }
  .year-group > header small { margin-top: 0; }
  .year-group > header b { margin: 0; padding: 0; text-align: right; }
  .year-group > header i { left: 0; right: auto; top: auto; bottom: -5px; }
  .issue-list { grid-template-columns: 1fr; gap: 0; }
  .issue-cell { min-height: 67px; padding: 10px 38px 10px 0; display: grid; grid-template-columns: 40px minmax(76px,.55fr) 1fr; gap: 9px; align-items: center; border-bottom: 1px solid rgba(21,36,42,.08); }
  .issue-cell:last-child { border-bottom: 0; }
  .issue-sequence { font-size: 16px; }
  .issue-jurisdiction { margin: 0; font-size: 6px; }
  .issue-cell h3 { margin: 0; font-size: 11px; }
  .issue-arrow { right: 8px; bottom: auto; top: 50%; transform: translateY(-50%); }
  .issue-link:hover .issue-arrow,.issue-link:focus-visible .issue-arrow { transform: translate(2px,-50%); }
  .design-band { margin: 13px 0 30px; padding: 16px; grid-template-columns: 1fr; gap: 13px; }
  .design-band-copy { display: flex; align-items: baseline; justify-content: space-between; }
  .design-band-copy strong { margin: 0; font-size: 17px; }
  .design-band-images { gap: 10px; }
  .design-band figure { grid-template-columns: 42px 1fr; gap: 8px; }
  .design-band img { width: 42px; height: 42px; }
  .design-band figcaption { font-size: 6px; }
  .story-grid { grid-template-columns: 1fr; gap: 35px; }
  .story { display: grid; grid-template-columns: 44% 1fr; border-top: 0; }
  .story-image { min-height: 165px; }
  .story-copy { padding: 18px 0 0 18px; }
  .story-copy h3 { font-size: 23px; }
  .versions { padding: 58px 0; }
  .version-cards { grid-template-columns: 1fr; }
  .version-cards article { padding: 25px 27px; }
  .source-grid { gap: 30px; }
  .closing { padding: 62px 0; }
  .closing .shell { min-height: 180px; }
  .closing p { font-size: 38px; }
}

@media (max-width: 410px) {
  .hero h1 { font-size: 44px; }
  html[lang="zh-CN"] .hero h1 { font-size: 41px; }
  .hero-coins { top: 195px; }
  .coin-shawnee { width: 150px; }
  .coin-war { width: 146px; }
  .coin-hot { left: 13%; width: 154px; }
  .coin-tuskegee { width: 146px; }
  .section-head h2, .geography h2, .source-grid h2 { font-size: 36px; }
  .story { grid-template-columns: 42% 1fr; }
  .story-image { min-height: 150px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }