/* Blog-only theme. Bootstrap supplies the responsive grid;
   no JS is required. */
:root {
  color-scheme:light dark;
  --blue:#014d9c;
  --green:#4d944c;
  --ink:#13334b;
  --muted:#506577;
  --paper:#fff;
  --wash:#f3f7fa;
  --line:#dbe5eb;
  --soft-green:#edf5e9;
  --accent:#326d32
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem
}
/* body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1rem;
  line-height:1.7
} */
a {
  color:var(--blue);
  text-underline-offset:4px
}
a:hover {
  color:var(--accent)
}
img {
  max-width:100%;
  height:auto
}
h1,h2,h3,h4 {
  color:var(--ink);
  font-weight:700;
  line-height:1.18;
  
}
h1 {
  font-size:clamp(2.3rem,5vw,4.5rem)
}
h2 {
  font-size:clamp(1.65rem,3vw,2.4rem)
}
p {
  margin-bottom:1.25rem
}
:focus-visible {
  outline:3px solid var(--green);
  outline-offset:5px
}
.container {
  max-width:1200px
}
.skip-link {
  position:absolute;
  left:1rem;
  top:-100px;
  z-index:10;
  padding:1rem;
  background:var(--paper)
}
.skip-link:focus {
  top:1rem
}
.contact-bar {
  background:var(--blue);
  color:#fff;
  padding:.55rem 0;
  font-size:.78rem
}
.contact-bar a {
  color:#fff;
  text-decoration:none
}
.site-header {
  border-bottom:1px solid var(--line);
  background:var(--paper)
}
.header-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding-block:1.15rem
}
.brand {
  display:flex;
  align-items:center;
  gap:.8rem;
  color:var(--blue);
  font-weight:800;
  font-size:1.1rem;
  letter-spacing:.025em;
  text-decoration:none
}
.brand img {
  width:62px;
  height:54px;
  object-fit:contain;
  background:white;
  border-radius:4px
}
.brand small {
  display:block;
  font-weight:500;
  font-size:.7rem;
  letter-spacing:.06em;
  color:var(--muted)
}
.desktop-nav {
  display:flex;
  gap:1.8rem;
  align-items:center
}
.desktop-nav>a {
  text-decoration:none;
  font-size:.9rem;
  font-weight:600
}
.desktop-nav [aria-current=page],.desktop-nav [aria-current=location] {
  border-bottom:2px solid var(--green)
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:1.6rem;
  min-height:48px;
  padding:.85rem 1.5rem;
  background:var(--blue);
  color:white;
  border-radius:6px;
  text-decoration:none;
  font-weight:650;
  transition:background .2s,transform .2s
}
.button:hover {
  background:#09386c;
  color:white;
  transform:translateY(-2px)
}
.button-small {
  padding:.6rem 1rem
}
.mobile-nav {
  display:none
}
.breadcrumb-nav {
  padding:1.5rem 0;
  font-size:.82rem;
  color:var(--muted)
}
.breadcrumb-nav ol {
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  padding:0;
  margin:0;
  list-style:none
}
.breadcrumb-nav li+li:before {
  content:'/';
  padding-right:.65rem;
  color:var(--muted)
}
.breadcrumb-nav a {
  text-decoration:none
}
.eyebrow {
  font-size:.73rem;
  font-weight:750;
  letter-spacing:.16em;
  color:var(--accent);
  margin-bottom:1rem
}
.intro {
  background:var(--wash);
  border-bottom:1px solid var(--line);
  padding-bottom:3.5rem
}
.intro-content {
  padding-top:2rem;
  max-width:850px
}
.intro h1 em {
  font-style:normal;
  color:var(--blue)
}
.intro .lead {
  max-width:650px;
  font-size:1.1rem;
  color:var(--muted);
  margin-top:1.5rem
}
.topic-tags {
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:1.75rem
}
.topic-tags span,.category {
  display:inline-block;
  border-radius:30px;
  padding:.35rem .85rem;
  /* font-size:.75rem; */
  font-weight:650;
  background:var(--soft-green);
  color:var(--accent)
}
.section-space {
  padding-block:4rem
}
.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.75rem
}
.section-heading p {
  margin:0;
  color:var(--muted);
  font-size:.9rem
}
.feature-card {
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:var(--paper);
  transition:box-shadow .25s,transform .25s
}
.feature-card:hover {
  box-shadow:0 16px 40px #014d9c14;
  transform:translateY(-3px)
}
.feature-image {
  height:100%;
  min-height:340px;
  object-fit:cover;
  width:100%;
  transition:transform .5s
}
.image-wrap {
  overflow:hidden;
  height:100%
}
.feature-card:hover .feature-image {
  transform:scale(1.025)
}
.feature-copy {
  padding:clamp(1.5rem,4vw,3rem)
}
.feature-copy h3 {
  font-size:clamp(1.6rem,2.6vw,2.15rem);
  margin:1.2rem 0
}
.feature-copy h3 a {
  color:var(--ink);
  text-decoration:none
}
.feature-copy p {
  color:var(--muted)
}
.meta {
  /* font-size:.8rem; */
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1rem
}
.text-link {
  display:inline-block;
  padding:.6rem 0;
  font-weight:700
}
.resource-section {
  background:var(--wash)
}
.resource-card {
  height:100%;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper);
  overflow:hidden;
  transition:transform .25s,box-shadow .25s
}
.resource-card:hover {
  transform:translateY(-5px);
  box-shadow:0 15px 30px #014d9c12
}
.resource-card img {
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover
}
.resource-copy {
  padding:1.5rem
}
.resource-copy h3 {
  font-size:1.35rem
}
.resource-copy p {
  font-size:.95rem;
  color:var(--muted)
}
.contact-panel {
  margin-block:4rem;
  background:var(--blue);
  border-radius:14px;
  padding:3rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem
}
.contact-panel h2,.contact-panel p {
  color:#fff
}
.contact-panel .eyebrow {
  color:#cbe6bf
}
.contact-panel p:last-child {
  margin-bottom:0
}
.button-white {
  background:#fff;
  color:#014d9c;
  flex-shrink:0
}
.button-white:hover {
  background:#e4efdf;
  color:#014d9c
}
.site-footer {
  padding-top:3rem;
  border-top:1px solid var(--line)
}
.site-footer h2 {
  font-size:.9rem;
  letter-spacing:0
}
.site-footer a {
  display:block;
  width:fit-content;
  padding:.25rem 0;
  text-decoration:none
}
.footer-brand {
  font-size:1.3rem;
  font-weight:750
}
.site-footer p,.site-footer a {
  font-size:.88rem
}
.footer-bottom {
  margin-top:2.5rem;
  border-top:1px solid var(--line);
  padding:1.2rem 0;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-size:.75rem;
  color:var(--muted)
}
.article-header {
  max-width:950px;
  padding:1.5rem 0 2rem
}
.article-header h1 {
 /* font-size:clamp(2.15rem,4.5vw,3.65rem); */
  margin:1rem 0 1.5rem
}
.article-deck {
  /* font-size:1.15rem; */
  color:var(--muted);
  max-width:760px
}
.article-figure {
  margin:0 0 3rem
}
.article-figure img {
  width:100%;
  max-height:510px;
  object-fit:contain;
  border-radius:12px
}
.article-figure figcaption {
  font-size:.78rem;
  color:var(--muted);
  margin-top:.7rem
}
/* .article-body {
  font-size:1.06rem;
  line-height:1.85;
  overflow-wrap:break-word
} */
.article-body h2 {
  /* font-size:1.8rem; */
  margin:2.7rem 0 1.1rem
}
.article-body h3 {
  /* font-size:1.3rem; */
  margin:2rem 0 1rem
}
.article-body li {
  margin-bottom:.35rem
}
.article-body li::marker {
  color:var(--accent)
}
.article-body strong {
  font-weight:650
}
/* .article-body>p:first-child {
  font-size:1.14rem
} */
.sidebar-box {
  padding:1.5rem;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--wash);
  margin-bottom:1.5rem
}
.sidebar-box h2 {
  font-size:1.1rem;
  letter-spacing:0
}
.contents ol {
  padding-left:1.2rem;
  margin:1rem 0 0
}
.contents li {
  margin-bottom:.6rem;
  /* font-size:.85rem */
}
.contents a {
  text-decoration:none
}
.sidebar-box p {
  font-size:.9rem;
  color:var(--muted)
}
.share-links {
  display:flex;
  gap:.6rem;
  flex-wrap:wrap
}
.share-links a {
  border:1px solid var(--line);
  border-radius:5px;
  padding:.5rem .75rem;
  font-size:.8rem;
  text-decoration:none;
  background:var(--paper)
}
.faq-item {
  border-bottom:1px solid var(--line);
  padding:1rem 0
}
.faq-item summary {
  font-weight:650;
  cursor:pointer;
  padding:.5rem 1.5rem .5rem 0;
  color:var(--ink)
}
.faq-item p {
  margin:.75rem 0
}
.author-box {
  padding:1.5rem;
  border-left:4px solid var(--green);
  background:var(--wash);
  margin-block:2.5rem
}
.author-box p {
  margin:0;
  font-size:.9rem
}
.related-note {
  color:var(--muted)
}

/* Native details navigation and FAQs stay keyboard-operable without scripts. */
@media(max-width:991px) {
  .desktop-nav {
  display:none
}
.mobile-nav {
  display:block;
  position:relative
}
.mobile-nav summary {
  cursor:pointer;
  padding:.6rem;
  border:1px solid var(--line);
  border-radius:5px;
  font-weight:600
}
.mobile-nav nav {
  position:absolute;
  right:0;
  top:100%;
  min-width:220px;
  padding:.75rem;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  z-index:5;
  box-shadow:0 10px 24px #0002
}
.mobile-nav a {
  display:block;
  padding:.7rem;
  text-decoration:none
}
.feature-image {
  max-height:400px
}
.article-sidebar {
  margin-bottom:1rem
}
.contact-panel {
  padding:2rem
}
.brand {
  font-size:.95rem
}

}

@media(max-width:575px) {
  .container {
  padding-left:20px;
  padding-right:20px
}
.brand img {
  width:46px;
  height:40px
}
.brand {
  font-size:.78rem;
  gap:.5rem
}
.brand small {
  font-size:.6rem
}
.contact-bar {
  font-size:.68rem
}
.intro {
  padding-bottom:2rem
}
.intro-content {
  padding-top:1rem
}
.section-space {
  padding-block:2.5rem
}
.section-heading {
  align-items:start;
  flex-direction:column
}
.feature-image {
  min-height:240px
}
.contact-panel {
  width:calc(100% - 40px);
  flex-direction:column;
  align-items:start;
  margin-block:2.5rem
}
.footer-bottom {
  flex-direction:column
}
.article-body {
  font-size:1rem
}
.article-header h1 {
  font-size:2.2rem
}

}

/* Follow the visitor's OS preference without a JavaScript theme switch. */
@media(prefers-color-scheme:dark) {
  :root {
  --blue:#86bdff;
  --ink:#e2ecf4;
  --muted:#afc0ce;
  --paper:#101e2a;
  --wash:#172a38;
  --line:#344958;
  --soft-green:#253f2d;
  --accent:#acd7a0
}
.contact-bar,.contact-panel {
  background:#073b6e
}
.button {
  background:#1b61a8;
  color:white
}
.button-white {
  background:white;
  color:#014d9c
}
.button-white:hover {
  background:#e4efdf;
  color:#014d9c
}
.brand img {
  padding:2px
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
*,*:before,*:after {
  transition:none!important;
  animation:none!important
}
.feature-card:hover,.resource-card:hover,.button:hover,.feature-card:hover .feature-image {
  transform:none
}

}

@media print {
  .site-header,.contact-bar,.article-sidebar,.contact-panel,.site-footer,.resource-section,.skip-link {
  display:none
}
body {
  background:white;
  color:black
}
.article-body {
  width:100%
}
.article-figure img {
  max-height:220px
}
.article-body details>p {
  display:block
}
a {
  color:inherit
}

}