:root {
  --ink: #102331;
  --ink-deep: #061621;
  --ink-soft: #334b58;
  --paper: #f8f7f4;
  --white: #fff;
  --gold: #b98a3d;
  --gold-light: #e2c27e;
  --silver: #dce3e5;
  --silver-dark: #9eacb1;
  --evergreen: #173c33;
  --red: #a72a32;
  --line-light: rgba(16,35,49,.14);
  --line-dark: rgba(255,255,255,.16);
  --serif: Iowan Old Style, Palatino Linotype, Book Antiqua, Georgia, serif;
  --sans: Inter, Helvetica Neue, Arial, system-ui, sans-serif;
  --max: 1460px;
  --gutter: clamp(24px,4.2vw,66px);
  --shadow: 0 24px 64px rgba(3,18,28,.22);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
body, button, a { -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
button { cursor: pointer; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 10px 14px; background: var(--white); color: var(--ink); transform: translateY(-150%); transition: transform .15s; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
.prototype { overflow: clip; }
.shell { width: min(calc(100% - 2 * var(--gutter)), var(--max)); margin-inline: auto; }
.site-header { min-height: 68px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; padding: 0 var(--gutter); color: var(--white); background: var(--ink-deep); border-bottom: 1px solid var(--line-dark); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-size: 17px; letter-spacing: -.01em; white-space: nowrap; }
.brand-mark { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(255,255,255,.54); border-radius: 50%; color: var(--gold-light); font-size: 15px; }
.brand small { display: block; margin-top: 2px; color: rgba(255,255,255,.56); font-family: var(--sans); font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }
.primary-nav { justify-self: center; display: flex; align-self: stretch; gap: 28px; }
.primary-nav a { display: grid; align-items: center; border-bottom: 2px solid transparent; color: rgba(255,255,255,.69); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; }
.primary-nav a.active { color: var(--white); border-bottom-color: var(--gold); }
.header-tools { display: flex; align-items: center; gap: 14px; }
.prototype-flag { padding: 7px 9px; color: rgba(255,255,255,.65); border: 1px solid var(--line-dark); border-radius: 999px; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.language-link { min-width: 40px; text-align: center; color: var(--gold-light); font-size: 10px; font-weight: 800; text-decoration: none; }
.series-hero { position: relative; min-height: 690px; color: var(--white); background:
  radial-gradient(circle at 74% 44%, rgba(255,255,255,.13), transparent 29%),
  radial-gradient(circle at 91% 12%, rgba(33,84,67,.58), transparent 34%),
  linear-gradient(125deg, var(--ink-deep), #0d2933 62%, var(--evergreen)); }
.series-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; background:
  repeating-linear-gradient(105deg, transparent 0 32px, rgba(255,255,255,.025) 33px, transparent 34px),
  linear-gradient(90deg, rgba(6,22,33,.66), transparent 58%); }
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(390px,.86fr) minmax(520px,1.14fr); grid-template-rows: auto 1fr auto; gap: 24px 44px; min-height: 690px; padding-block: 26px 0; }
.breadcrumb { grid-column: 1 / -1; display: flex; gap: 9px; align-items: center; color: rgba(255,255,255,.62); font-size: 9px; }
.breadcrumb a { text-decoration: none; }
.breadcrumb span:last-child { color: rgba(255,255,255,.9); }
.hero-copy { align-self: center; padding: 20px 0 42px; }
.eyebrow, .section-kicker { margin: 0 0 18px; color: var(--gold-light); font-size: 9px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; margin: 0 12px 3px 0; background: var(--red); }
.hero-copy h1 { max-width: 700px; margin: 0; font-family: var(--serif); font-size: clamp(48px,5vw,72px); font-weight: 400; letter-spacing: -.045em; line-height: .96; }
.hero-span { margin: 18px 0 0; color: var(--silver); font-family: var(--serif); font-size: clamp(21px,2vw,30px); }
.hero-deck { max-width: 610px; margin: 26px 0 0; color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.72; }
.hero-thesis { max-width: 560px; margin: 28px 0 0; padding-left: 18px; border-left: 2px solid var(--gold); color: var(--white); font-family: var(--serif); font-size: 20px; line-height: 1.35; }
.hero-art { position: relative; align-self: stretch; min-height: 470px; }
.hero-maple { position: absolute; right: -12%; top: -3%; width: 68%; aspect-ratio: 1; opacity: .07; color: var(--white); transform: rotate(-11deg); }
.hero-maple svg { width: 100%; height: 100%; fill: currentColor; }
.hero-coin { position: absolute; }
.hero-coin picture { display: block; width: 100%; height: 100%; }
.hero-coin img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 30px 34px rgba(0,0,0,.32)); }
.hero-coin--reverse { z-index: 2; width: min(66%, 480px); right: 4%; top: 2%; }
.hero-coin--obverse { z-index: 1; width: min(43%, 310px); left: 1%; bottom: 7%; }
.hero-coin figcaption { position: absolute; bottom: -23px; left: 50%; min-width: max-content; transform: translateX(-50%); color: rgba(255,255,255,.63); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.hero-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6,1fr); margin: 0; background: rgba(4,18,27,.74); border-top: 1px solid var(--line-dark); }
.hero-facts div { min-height: 98px; padding: 22px 18px; border-right: 1px solid var(--line-dark); }
.hero-facts div:last-child { border-right: 0; }
.hero-facts dt { color: rgba(255,255,255,.5); font-size: 8px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.hero-facts dd { margin: 9px 0 0; color: var(--white); font-family: var(--serif); font-size: 17px; }
.image-note { position: absolute; right: 22px; bottom: 110px; z-index: 3; max-width: 300px; color: rgba(255,255,255,.45); font-size: 7px; line-height: 1.45; text-align: right; }
.section-nav { position: sticky; top: 0; z-index: 20; color: var(--white); background: rgba(6,22,33,.97); border-bottom: 1px solid var(--line-dark); }
.section-nav-inner { display: flex; overflow-x: auto; scrollbar-width: none; }
.section-nav-inner::-webkit-scrollbar { display: none; }
.section-nav a { flex: 0 0 auto; padding: 15px 18px; border-bottom: 2px solid transparent; color: rgba(255,255,255,.65); font-size: 8px; font-weight: 800; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; }
.section-nav a:hover { color: var(--white); border-bottom-color: var(--gold); }
.reading-section { padding: 84px 0; }
.section-heading { display: grid; grid-template-columns: minmax(0,.95fr) minmax(320px,.65fr); align-items: end; gap: 60px; margin-bottom: 48px; }
.section-heading h2 { max-width: 820px; margin: 0; font-family: var(--serif); font-size: clamp(38px,4vw,58px); font-weight: 400; letter-spacing: -.035em; line-height: 1.03; }
.section-heading p:last-child { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.75; }
.about { background: var(--paper); }
.about-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); gap: 70px; }
.about-lead { margin: 0; font-family: var(--serif); font-size: clamp(25px,2.6vw,38px); line-height: 1.35; }
.about-copy { display: grid; grid-template-columns: repeat(2,1fr); gap: 36px; margin-top: 40px; color: var(--ink-soft); font-size: 14px; line-height: 1.78; }
.scope-card { align-self: start; padding: 34px; color: var(--white); background: var(--ink); border-top: 3px solid var(--red); box-shadow: var(--shadow); }
.scope-card h3 { margin: 0 0 18px; font-family: var(--serif); font-size: 28px; font-weight: 400; }
.scope-card p { margin: 0; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.7; }
.scope-card ul { margin: 22px 0 0; padding: 0; list-style: none; }
.scope-card li { padding: 10px 0; border-top: 1px solid var(--line-dark); color: rgba(255,255,255,.8); font-size: 10px; }
.evolution { color: var(--white); background: var(--ink); }
.evolution .section-heading p:last-child { color: rgba(255,255,255,.66); }
.evolution-track { position: relative; display: grid; grid-template-columns: repeat(8,1fr); gap: 0; margin-top: 14px; }
.evolution-track::before { content: ""; position: absolute; top: 31px; left: 2%; right: 2%; height: 1px; background: linear-gradient(90deg,var(--red),var(--gold),var(--silver)); }
.milestone { position: relative; padding: 0 14px; }
.milestone time { position: relative; z-index: 1; display: grid; width: 62px; height: 62px; place-items: center; margin-bottom: 25px; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; color: var(--white); background: var(--ink); font-family: var(--serif); font-size: 16px; }
.milestone:first-child time, .milestone.is-critical time { border-color: var(--red); }
.milestone h3 { margin: 0 0 10px; color: var(--gold-light); font-size: 10px; letter-spacing: .04em; }
.milestone p { margin: 0; color: rgba(255,255,255,.65); font-size: 10px; line-height: 1.55; }
.year-browser { color: var(--white); background:
  radial-gradient(circle at 85% 20%, rgba(34,78,65,.64), transparent 33%),
  var(--ink-deep); }
.year-browser .section-heading { margin-bottom: 34px; }
.year-browser .section-heading p:last-child { color: rgba(255,255,255,.64); }
.browser-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 24px; }
.era-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.era-filter { min-height: 42px; padding: 0 16px; color: rgba(255,255,255,.7); background: transparent; border: 1px solid var(--line-dark); border-radius: 999px; font-size: 9px; font-weight: 800; }
.era-filter[aria-pressed="true"] { color: var(--ink-deep); background: var(--gold-light); border-color: var(--gold-light); }
.year-status { color: rgba(255,255,255,.58); font-size: 9px; }
.year-grid { display: grid; grid-template-columns: repeat(13,1fr); gap: 7px; padding: 18px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.025); }
.year-button { min-height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.72); background: rgba(255,255,255,.035); border-radius: 6px; font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.year-button:hover { color: var(--white); border-color: rgba(226,194,126,.65); }
.year-button[aria-pressed="true"] { color: var(--ink-deep); background: var(--white); border-color: var(--white); box-shadow: inset 0 -3px var(--red); }
.year-button[hidden] { display: none; }
.year-detail { display: grid; grid-template-columns: minmax(270px,.7fr) minmax(0,1.3fr); min-height: 390px; margin-top: 18px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.045); }
.year-visual { display: grid; place-items: center; min-height: 390px; padding: 34px; background:
  radial-gradient(circle, rgba(255,255,255,.13), transparent 54%),
  rgba(255,255,255,.025); border-right: 1px solid var(--line-dark); }
.year-visual img { width: min(100%,330px); height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 20px 24px rgba(0,0,0,.26)); }
.image-unavailable { display: grid; width: min(77%,280px); aspect-ratio: 1; place-items: center; border: 1px dashed rgba(255,255,255,.27); border-radius: 50%; text-align: center; color: rgba(255,255,255,.58); }
.image-unavailable::before { content: "🍁"; display: block; margin-bottom: -32px; color: rgba(255,255,255,.11); font-size: 76px; filter: grayscale(1); }
.image-unavailable span { max-width: 150px; font-size: 9px; line-height: 1.55; }
.year-copy { padding: 40px clamp(28px,4vw,60px); }
.year-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line-dark); }
.year-heading h3 { margin: 0; font-family: var(--serif); font-size: 50px; font-weight: 400; }
.year-heading span { color: var(--gold-light); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.year-note { margin: 24px 0; color: rgba(255,255,255,.75); font-size: 13px; line-height: 1.7; }
.year-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin: 0; background: var(--line-dark); }
.year-facts div { padding: 16px; background: #102731; }
.year-facts dt { color: rgba(255,255,255,.47); font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.year-facts dd { margin: 7px 0 0; color: var(--white); font-size: 10px; line-height: 1.45; }
.year-mintage { margin: 18px 0 0; color: rgba(255,255,255,.58); font-size: 9px; }
.portraits { background: var(--paper); }
.portrait-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
.portrait-card { position: relative; min-height: 335px; padding: 28px 22px; overflow: hidden; border: 1px solid var(--line-light); background: var(--white); }
.portrait-card.is-memorial { color: var(--white); background: var(--ink); }
.portrait-card.is-current { color: var(--white); background: var(--evergreen); }
.portrait-medallion { display: grid; width: 112px; aspect-ratio: 1; place-items: center; margin: 0 auto 24px; overflow: hidden; border: 1px solid currentColor; border-radius: 50%; color: var(--silver-dark); background: linear-gradient(145deg,#eef1f1,#cbd3d5); }
.portrait-medallion img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.portrait-medallion span { font-family: var(--serif); font-size: 34px; }
.portrait-card p { margin: 0 0 8px; color: var(--gold); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.portrait-card h3 { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 400; }
.portrait-card small { display: block; margin-top: 12px; color: var(--ink-soft); font-size: 9px; line-height: 1.55; }
.portrait-card.is-memorial small, .portrait-card.is-current small { color: rgba(255,255,255,.66); }
.security { color: var(--white); background: var(--ink); }
.security .section-heading p:last-child { color: rgba(255,255,255,.65); }
.security-grid { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line-dark); }
.security-card { min-height: 330px; padding: 30px; border-right: 1px solid var(--line-dark); }
.security-card:last-child { border-right: 0; }
.security-icon { display: grid; width: 110px; aspect-ratio: 1; place-items: center; margin-bottom: 30px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: repeating-radial-gradient(circle,transparent 0 5px,rgba(255,255,255,.08) 6px 7px); }
.security-icon b { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--gold); color: var(--gold-light); font-family: var(--serif); font-size: 15px; }
.security-card time { color: var(--red); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.security-card h3 { margin: 10px 0 14px; font-family: var(--serif); font-size: 23px; font-weight: 400; }
.security-card p { margin: 0; color: rgba(255,255,255,.65); font-size: 10px; line-height: 1.65; }
.specifications { background: var(--white); }
.spec-table-wrap { overflow-x: auto; border: 1px solid var(--line-light); }
.spec-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: 19px 18px; border-bottom: 1px solid var(--line-light); text-align: left; font-size: 10px; }
.spec-table th { color: var(--ink-soft); background: #eef1f0; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.spec-table td:first-child { font-family: var(--serif); font-size: 16px; }
.spec-table tr:last-child td { border-bottom: 0; }
.table-note { margin: 18px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.65; }
.records { background: var(--paper); }
.record-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 60px; }
.mintage-rule { padding: 36px; color: var(--white); background: var(--evergreen); border-top: 3px solid var(--gold); }
.mintage-rule strong { display: block; font-family: var(--serif); font-size: 34px; font-weight: 400; }
.mintage-rule p { margin: 15px 0 0; color: rgba(255,255,255,.72); font-size: 11px; line-height: 1.7; }
.record-bars { display: grid; gap: 12px; }
.record-bar { display: grid; grid-template-columns: 106px 1fr auto; align-items: center; gap: 16px; min-height: 64px; padding: 0 18px; border: 1px solid var(--line-light); background: var(--white); }
.record-bar time { font-family: var(--serif); font-size: 17px; }
.record-bar span { color: var(--ink-soft); font-size: 9px; }
.record-bar b { color: var(--evergreen); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.feature { padding: 90px 0; color: var(--white); background:
  radial-gradient(circle at 18% 50%, rgba(255,255,255,.11), transparent 25%),
  linear-gradient(120deg,var(--ink-deep),var(--evergreen)); }
.feature-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 70px; align-items: center; }
.feature-seal { position: relative; display: grid; width: min(80%,420px); aspect-ratio: 1; place-items: center; margin: auto; border: 1px solid rgba(255,255,255,.19); border-radius: 50%; background: repeating-radial-gradient(circle,transparent 0 11px,rgba(255,255,255,.03) 12px 13px); }
.feature-seal::after { content: "DNA"; display: grid; width: 38%; aspect-ratio: 1; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-light); font-family: var(--serif); font-size: 34px; }
.feature-copy h2 { max-width: 680px; margin: 0; font-family: var(--serif); font-size: clamp(38px,4.5vw,62px); font-weight: 400; letter-spacing: -.035em; line-height: 1.03; }
.feature-copy > p { max-width: 700px; margin: 26px 0 0; color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.78; }
.feature-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 34px; background: var(--line-dark); }
.feature-steps div { padding: 20px; background: rgba(6,22,33,.55); }
.feature-steps strong { color: var(--red); font-size: 11px; }
.feature-steps span { display: block; margin-top: 8px; color: rgba(255,255,255,.72); font-size: 9px; line-height: 1.5; }
.related { background: var(--white); }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.related-card { display: grid; grid-template-columns: 150px 1fr; min-height: 190px; overflow: hidden; border: 1px solid var(--line-light); background: var(--paper); }
.related-image { display: grid; place-items: center; padding: 18px; background: #e9edec; }
.related-image img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.related-copy { padding: 25px 22px; }
.related-copy p { margin: 0; color: var(--red); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.related-copy h3 { margin: 9px 0; font-family: var(--serif); font-size: 22px; font-weight: 400; }
.related-copy span { color: var(--ink-soft); font-size: 9px; line-height: 1.55; }
.related-copy small { display: block; margin-top: 13px; color: var(--evergreen); font-size: 8px; font-weight: 800; }
.sources { padding: 74px 0; background: var(--paper); }
.source-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 50px; margin: 0; padding: 0; list-style: none; counter-reset: sources; }
.source-list li { counter-increment: sources; display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line-light); }
.source-list li::before { content: counter(sources,decimal-leading-zero); color: var(--gold); font-family: var(--serif); font-size: 16px; }
.source-list a { font-size: 10px; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.source-list span { display: block; margin-top: 6px; color: var(--ink-soft); font-size: 8px; line-height: 1.5; }
.review-note { margin-top: 34px; padding: 20px 24px; border-left: 3px solid var(--red); color: var(--ink-soft); background: var(--white); font-size: 10px; line-height: 1.65; }
.site-footer { display: flex; justify-content: space-between; gap: 30px; align-items: center; min-height: 110px; padding: 24px var(--gutter); color: var(--white); background: var(--ink-deep); }
.site-footer p { margin: 0; color: rgba(255,255,255,.5); font-size: 8px; }
.noscript-fallback { max-width: 760px; margin: 80px auto; padding: 32px; font-family: var(--sans); }
@media (max-width: 1180px) {
  .hero-inner { grid-template-columns: .85fr 1.15fr; }
  .hero-facts { grid-template-columns: repeat(3,1fr); }
  .hero-facts div:nth-child(3) { border-right: 0; }
  .hero-facts div:nth-child(-n+3) { border-bottom: 1px solid var(--line-dark); }
  .evolution-track { grid-template-columns: repeat(4,1fr); gap: 36px 0; }
  .year-grid { grid-template-columns: repeat(10,1fr); }
  .portrait-grid { grid-template-columns: repeat(3,1fr); }
  .security-grid { grid-template-columns: repeat(2,1fr); }
  .security-card:nth-child(2) { border-right: 0; }
  .security-card:nth-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
  .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .site-header { min-height: 104px; grid-template-columns: 1fr auto; grid-template-rows: 58px 46px; gap: 0 20px; }
  .primary-nav { grid-column: 1 / -1; grid-row: 2; justify-self: start; width: 100%; gap: 28px; }
  .header-tools { grid-column: 2; grid-row: 1; }
  .prototype-flag { display: none; }
  .series-hero, .hero-inner { min-height: 800px; }
  .hero-inner { grid-template-columns: 1fr; grid-template-rows: auto auto 370px auto; gap: 0; }
  .breadcrumb { grid-column: 1; padding-top: 6px; }
  .hero-copy { padding: 50px 0 10px; }
  .hero-copy h1 { max-width: 580px; }
  .hero-art { min-height: 350px; }
  .hero-coin--reverse { width: min(60%,360px); right: 8%; top: 0; }
  .hero-coin--obverse { width: min(38%,230px); left: 8%; bottom: 3%; }
  .hero-facts { grid-column: 1; }
  .image-note { display: none; }
  .section-heading { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .about-grid, .record-layout, .feature-grid { grid-template-columns: 1fr; gap: 40px; }
  .evolution-track { grid-template-columns: repeat(2,1fr); }
  .year-grid { grid-template-columns: repeat(8,1fr); }
  .year-detail { grid-template-columns: 1fr; }
  .year-visual { min-height: 340px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .portrait-grid { grid-template-columns: repeat(2,1fr); }
  .source-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  :root { --gutter: 20px; }
  .site-header { min-height: 96px; grid-template-rows: 54px 42px; padding-inline: 18px; }
  .brand { font-size: 15px; }
  .brand small { display: none; }
  .brand-mark { width: 28px; height: 28px; }
  .primary-nav { gap: 22px; overflow-x: auto; }
  .primary-nav a { font-size: 8px; }
  .series-hero, .hero-inner { min-height: 870px; }
  .hero-inner { grid-template-rows: auto auto 320px auto; }
  .hero-copy { padding-top: 34px; }
  .hero-copy h1 { font-size: 46px; }
  .hero-span { font-size: 22px; }
  .hero-deck { font-size: 12px; }
  .hero-thesis { font-size: 17px; }
  .hero-art { min-height: 310px; }
  .hero-coin--reverse { width: min(68%,295px); right: 0; }
  .hero-coin--obverse { width: min(44%,190px); left: 0; bottom: 2%; }
  .hero-facts { grid-template-columns: repeat(2,1fr); }
  .hero-facts div { min-height: 86px; padding: 18px 14px; border-bottom: 1px solid var(--line-dark); }
  .hero-facts div:nth-child(odd) { border-right: 1px solid var(--line-dark); }
  .hero-facts div:nth-child(even) { border-right: 0; }
  .hero-facts div:nth-last-child(-n+2) { border-bottom: 0; }
  .hero-facts dd { font-size: 15px; }
  .section-nav a { padding-inline: 14px; font-size: 7px; }
  .reading-section { padding: 58px 0; }
  .section-heading { margin-bottom: 32px; }
  .section-heading h2 { font-size: 36px; }
  .about-copy { grid-template-columns: 1fr; gap: 16px; }
  .about-lead { font-size: 27px; }
  .scope-card { padding: 28px; }
  .evolution-track { grid-template-columns: 1fr 1fr; gap: 30px 0; }
  .milestone { padding: 0 8px; }
  .milestone time { width: 50px; height: 50px; font-size: 13px; }
  .browser-toolbar { align-items: flex-start; flex-direction: column; }
  .era-filters { flex-wrap: nowrap; width: 100%; padding-bottom: 5px; overflow-x: auto; }
  .era-filter { flex: 0 0 auto; min-height: 40px; }
  .year-grid { grid-template-columns: repeat(5,1fr); padding: 12px; }
  .year-button { min-height: 43px; }
  .year-visual { min-height: 295px; padding: 26px; }
  .year-copy { padding: 30px 22px; }
  .year-heading h3 { font-size: 43px; }
  .year-facts { grid-template-columns: repeat(2,1fr); }
  .portrait-grid { grid-template-columns: 1fr; }
  .portrait-card { min-height: 280px; }
  .security-grid { grid-template-columns: 1fr; }
  .security-card { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .security-card:last-child { border-bottom: 0; }
  .record-bar { grid-template-columns: 80px 1fr; padding-block: 12px; }
  .record-bar b { grid-column: 2; }
  .feature { padding: 64px 0; }
  .feature-seal { width: 75%; }
  .feature-steps { grid-template-columns: 1fr; }
  .related-card { grid-template-columns: 122px 1fr; }
  .related-copy { padding: 20px 16px; }
  .site-footer { align-items: flex-start; flex-direction: column; padding-block: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Phase 3 visual correction: exact transparent faces + text-first editorial modules. */
.hero-art {
  display: grid;
  grid-template-columns: minmax(0,.78fr) minmax(0,1fr);
  align-items: center;
  gap: 0;
  padding: 12px 0 40px;
}
.hero-maple { right: 8%; top: 12%; width: 48%; opacity: .035; }
.hero-face { position: relative; z-index: 1; width: 100%; margin: 0; }
.hero-face--obverse { grid-column: 1; grid-row: 1; align-self: end; padding: 19% 0 0; }
.hero-face--reverse { grid-column: 2; grid-row: 1; align-self: start; }
.hero-face picture,
.hero-face img { width: 100%; height: 100%; }
.coin-presentation {
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 24px 26px rgba(0,0,0,.32));
}
.hero-face figcaption {
  min-height: 22px;
  margin-top: 8px;
  color: rgba(255,255,255,.63);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.45;
  text-align: center;
}
.image-note { max-width: 360px; }

.browser-summary {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  width: min(100%,620px);
  margin: -12px 0 28px;
  border-block: 1px solid var(--line-dark);
}
.browser-summary div { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px 14px 0; }
.browser-summary dt { color: var(--gold-light); font-family: var(--serif); font-size: 24px; }
.browser-summary dd { margin: 0; color: rgba(255,255,255,.58); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.year-detail {
  display: block;
  min-height: 0;
  margin-top: 18px;
  padding: clamp(28px,4vw,48px);
  border: 1px solid var(--line-dark);
  background: linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
}
.year-heading { align-items: center; padding-bottom: 20px; }
.year-heading > div > span { color: var(--gold-light); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.year-heading h3 { margin-top: 8px; }
.year-reference { display: grid; grid-template-columns: 76px 130px; align-items: center; gap: 14px; margin: 0; }
.year-reference picture,
.year-reference img { width: 76px; height: 76px; }
.year-reference figcaption { color: rgba(255,255,255,.62); font-size: 8px; font-weight: 800; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; }
.year-note { max-width: 900px; }
.year-facts { grid-template-columns: 1.1fr 1fr 1.5fr .7fr .7fr; }
.year-mintage { margin-bottom: 0; }

.portrait-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.65fr); gap: clamp(44px,7vw,104px); align-items: center; }
.portrait-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.portrait-timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 112px; width: 1px; background: var(--line-light); }
.portrait-entry { position: relative; display: grid; grid-template-columns: 90px 1fr; gap: 44px; min-height: 116px; padding: 22px 0; border-top: 1px solid var(--line-light); }
.portrait-entry:last-child { border-bottom: 1px solid var(--line-light); }
.portrait-entry::before { content: ""; position: absolute; top: 29px; left: 107px; width: 11px; height: 11px; border: 2px solid var(--paper); border-radius: 50%; background: var(--silver-dark); }
.portrait-entry.is-current::before { background: var(--red); }
.portrait-entry time { color: var(--red); font-family: var(--serif); font-size: 17px; }
.portrait-entry p { margin: 0 0 7px; color: var(--gold); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.portrait-entry h3 { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 400; }
.portrait-entry span { display: block; max-width: 620px; margin-top: 8px; color: var(--ink-soft); font-size: 10px; line-height: 1.65; }
.portrait-detail { margin: 0; padding: 18px; color: var(--white); background: var(--evergreen); box-shadow: var(--shadow); }
.portrait-detail picture,
.portrait-detail img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.portrait-detail img { height: auto; }
.portrait-detail figcaption { padding: 15px 4px 3px; color: var(--gold-light); font-size: 8px; font-weight: 800; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; }

.security-layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(360px,.9fr); gap: clamp(38px,6vw,88px); align-items: start; }
.security-timeline { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-dark); }
.security-timeline li { display: grid; grid-template-columns: 42px 58px 1fr; gap: 16px; min-height: 130px; padding: 25px 0; border-bottom: 1px solid var(--line-dark); }
.security-timeline > li > span { color: rgba(255,255,255,.3); font-family: var(--serif); font-size: 16px; }
.security-timeline time { color: var(--red); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.security-timeline h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 23px; font-weight: 400; }
.security-timeline p { margin: 0; color: rgba(255,255,255,.64); font-size: 10px; line-height: 1.7; }
.security-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; position: sticky; top: 72px; }
.security-details figure { margin: 0; overflow: hidden; border: 1px solid var(--line-dark); background: rgba(255,255,255,.04); }
.security-details picture,
.security-details img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.security-details img { height: auto; }
.security-details figcaption { min-height: 54px; padding: 14px; color: var(--gold-light); font-size: 7px; font-weight: 800; letter-spacing: .09em; line-height: 1.55; }

.feature-detail { margin: 0; padding: 18px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.04); }
.feature-detail picture,
.feature-detail img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.feature-detail img { height: auto; }
.feature-detail figcaption { padding: 15px 4px 2px; color: var(--gold-light); font-size: 8px; font-weight: 800; letter-spacing: .1em; }

.related-card { display: block; min-height: 270px; padding: 30px; overflow: visible; background: var(--paper); }
.related-card > span { color: var(--red); font-family: var(--serif); font-size: 20px; }
.related-card > p { margin: 32px 0 9px; color: var(--gold); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.related-card h3 { margin: 0; font-family: var(--serif); font-size: 27px; font-weight: 400; }
.related-card > div { width: 42px; height: 1px; margin: 22px 0; background: var(--red); }
.related-card small { color: var(--ink-soft); font-size: 10px; line-height: 1.65; }

@media (max-width: 1180px) {
  .hero-face--obverse { padding-top: 26%; }
  .portrait-layout { grid-template-columns: minmax(0,1.2fr) minmax(280px,.6fr); }
  .security-layout { grid-template-columns: 1fr; }
  .security-details { position: static; width: min(100%,620px); }
  .year-facts { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 800px) {
  .hero-art { grid-template-columns: minmax(0,.78fr) minmax(0,1fr); min-height: 350px; padding: 8px 0 36px; }
  .hero-face--obverse { padding-top: 28%; }
  .portrait-layout { grid-template-columns: 1fr; }
  .portrait-detail { width: min(100%,520px); }
  .year-detail { display: block; }
  .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero-art { min-height: 310px; }
  .hero-maple { width: 62%; }
  .hero-face figcaption { font-size: 6px; }
  .browser-summary { grid-template-columns: 1fr; }
  .browser-summary div { border-top: 1px solid var(--line-dark); }
  .browser-summary div:first-child { border-top: 0; }
  .year-detail { padding: 26px 20px; }
  .year-heading { align-items: flex-start; }
  .year-reference { grid-template-columns: 64px 100px; }
  .year-reference picture,
  .year-reference img { width: 64px; height: 64px; }
  .year-facts { grid-template-columns: repeat(2,1fr); }
  .portrait-timeline::before { left: 78px; }
  .portrait-entry { grid-template-columns: 62px 1fr; gap: 32px; }
  .portrait-entry::before { left: 73px; }
  .portrait-entry h3 { font-size: 20px; }
  .portrait-detail { padding: 14px; }
  .security-timeline li { grid-template-columns: 30px 48px 1fr; gap: 10px; }
  .security-details { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .security-details figcaption { min-height: 70px; padding: 10px; font-size: 6px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-detail { width: min(100%,420px); }
  .related-card { display: block; min-height: 0; padding: 28px; }
}