:root {
  color-scheme: light;
  --background: #f7f9f8;
  --surface: #fff;
  --ink: #20302b;
  --soft-ink: #4c6257;
  --green: #174d3d;
  --green-link: #145d48;
  --line: #d7e1db;
  --focus: #b65c00;
  --notice: #edf5f0;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font: 18px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: var(--green-link); text-underline-offset: .2em; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.shell { width: min(100% - 48px, 980px); margin-inline: auto; }
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10;
  padding: 10px 16px;
  border: 2px solid var(--green);
  border-radius: 8px;
  background: var(--surface);
}
.skip-link:focus { top: 12px; }
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.masthead { display: flex; align-items: center; min-height: 72px; }
.brand {
  color: #153e32;
  font-size: 1.6rem;
  font-weight: 750;
  text-decoration: none;
}
.nav { display: flex; flex-wrap: wrap; gap: 9px; padding-bottom: 18px; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 13px;
  border: 1px solid #bfd1c7;
  border-radius: 8px;
  background: var(--surface);
  color: var(--green);
  text-decoration: none;
  line-height: 1.3;
}
.nav a[aria-current="page"] { background: var(--green); color: var(--surface); }
.main-content { min-height: 44vh; }
.intro { padding: 46px 0 30px; }
h1 { margin: 0 0 16px; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.18; }
h2 { margin: 0 0 12px; font-size: 1.25rem; line-height: 1.35; }
.lead { max-width: 740px; margin: 0 0 22px; font-size: 1.12rem; }
.notice {
  margin: 24px 0;
  padding: 17px 20px;
  border-left: 4px solid #2b795b;
  background: var(--notice);
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 17px;
  margin: 26px 0 38px;
}
.card { padding: 22px; border: 1px solid #dce6df; border-radius: 12px; background: var(--surface); }
.card p { margin: 0; color: var(--soft-ink); }
.card[id] { scroll-margin-top: 20px; }
.search-form { width: 100%; max-width: 740px; }
.search-form label { display: block; margin-bottom: 10px; font-weight: 650; }
.search-controls { display: flex; gap: 12px; align-items: stretch; width: 100%; }
.search-controls input {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 58px;
  padding: 13px 16px;
  border: 2px solid #a9bfb3;
  border-radius: 10px;
  background: #e6e6e8;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
}
.search-controls button {
  display: block;
  flex: 0 0 auto;
  min-width: 146px;
  min-height: 58px;
  padding: 13px 22px;
  border: 2px solid var(--green);
  border-radius: 10px;
  background-color: var(--green);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.help-text { margin-top: 8px; font-size: .95rem; color: var(--soft-ink); }
.search-results:not(:empty) { margin-top: 22px; }
.search-results ul { padding: 0; margin: 6px 0 22px; list-style: none; }
.search-results li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.result-detail { display: block; margin-top: 3px; color: var(--soft-ink); font-size: .94rem; }
.site-footer {
  margin-top: 50px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  color: var(--soft-ink);
  font-size: .9rem;
}
@media (max-width: 550px) {
  body { font-size: 17px; line-height: 1.55; }
  .shell { width: calc(100% - 36px); }
  .masthead { min-height: 65px; }
  .brand { font-size: 1.5rem; }
  .nav { gap: 7px; padding-bottom: 14px; }
  .nav a { min-height: 40px; padding: 7px 10px; font-size: .93rem; }
  .intro { padding-top: 32px; }
  .card-grid { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 18px; }
  /* Small screens: retain the preferred large, single-row search layout. */
  .search-controls { flex-direction: row; flex-wrap: nowrap; gap: 9px; }
  .search-controls input {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
    min-height: 58px;
  }
  .search-controls button {
    flex: 0 0 auto;
    width: auto;
    min-width: 86px;
    min-height: 58px;
    padding: 11px 12px;
  }

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

/* 04A historical learning articles: extend the existing Yursible light design. */
.history-top-nav {display:flex;justify-content:space-between;align-items:center;gap:12px; margin:0 0 34px;}
.history-top-nav a,.history-bottom-links a {display:inline-block; padding:8px 14px; border:1px solid #bfd1c7; border-radius:11px; text-decoration:none; font-weight:650;}
.history-eyebrow {font-size:.93rem; font-weight:700; letter-spacing:.02em; color:var(--soft-ink); margin:0 0 14px;}
.history-people {font-size:.94rem; color:var(--soft-ink); margin:9px 0 20px;}
.history-section {padding:20px 24px; margin:28px 0; background:#fff; border:1px solid var(--line); border-radius:17px;}
.history-section h2 {font-size:1.28rem; margin-bottom:15px;}
.history-section p {margin:0 0 1.1em; max-width:76ch;}
.history-section p:last-child {margin-bottom:0;}
.history-dates, .history-sources {border-left:4px solid #36795f; padding:4px 8px 4px 21px; margin:26px 0;}
.history-dates li, .history-sources li {margin:8px 0;}
.history-dates ul, .history-sources ul {padding-left:23px;}
.history-list-card {background:#fff; border:1px solid var(--line); border-radius:17px; padding:23px 26px; margin:18px 0;}
.history-list-card h2 {font-size:1.25rem; margin-bottom:8px;}
.history-list-card p:not(.history-eyebrow) {margin:9px 0;}
.history-note {font-size:.95rem; color:var(--soft-ink);}
.history-bottom-links {display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; margin-top:28px;}
.history-pager {display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:10px; margin:38px 0 15px;}
.history-pager a {display:flex;align-items:center;justify-content:center;text-align:center;min-height:54px; padding:10px 5px; border:1px solid #91afa0; border-radius:999px; font-size:.95rem; font-weight:750; text-decoration:none; color:var(--green); background:#fff;}
.history-series-link {text-align:center; margin-bottom:28px;}
.history-series-link a {display:block; padding:15px 16px;border:1px solid #91afa0; border-radius:999px; font-weight:700; text-decoration:none;}
.history-directory {background:#fff; border:1px solid var(--line); border-radius:15px; padding:23px;}
.history-article-list {padding-left:24px;}
.history-article-list li {margin:16px 0;}
.topic-collection-link {margin-top:13px!important;}
@media(max-width:550px){
 .history-top-nav {margin-bottom:24px;}
 .history-top-nav a {padding:8px 10px; font-size:.88rem;}
 .history-section {padding:18px;}
 .history-list-card {padding:18px;}
 .history-pager {gap:7px;}
 .history-pager a {font-size:.8rem; padding:9px 2px;}
}

/* 07A: Yursible historical reference navigation. */
.feature-card {background:#fff; border:1px solid var(--line); border-radius:17px; padding:24px; margin:28px 0 32px;}
.feature-card h2 {font-size:1.32rem;}
.feature-card p:last-child {margin-bottom:0;}
.topic-links {padding-left:21px; margin:12px 0 0;}
.topic-links li {margin:7px 0;}
.card .topic-collection-link {margin-top:14px;}
.reference-index {padding-left:27px; margin:20px 0 30px;}
.reference-index li {padding:13px 0; border-bottom:1px solid var(--line);}
@media(max-width:550px){.feature-card{padding:18px;}.reference-index{padding-left:22px;}}

/* 08A: article pager has two valid links at endpoints, three in the middle. */
 .history-pager {display:flex; flex-wrap:nowrap; align-items:stretch; margin-bottom:28px;}
 .history-pager a {flex:1 1 0; min-width:0;}
 @media(max-width:550px){.history-pager a{font-size:.82rem; padding-inline:5px;}}

/* 09A: separate American Republic article collection; preserve 08A palette and layout. */
.republic-collection {margin:30px 0; padding:0; list-style:none;}
.republic-collection > li {margin:18px 0;}
.republic-collection .history-list-card h2 {font-size:1.25rem;}
.republic-directory {margin-bottom:22px;}
.history-article .history-pager:has(a:nth-child(2):last-child) a {flex:0 1 48%;}