/* Article landing page */
.articles-hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 88% 18%, rgba(234, 119, 4, 0.28), transparent 26rem),
    radial-gradient(circle, rgba(234, 119, 4, 0.64) 1px, transparent 1.5px) 1.25rem 1.25rem / 10rem 8rem no-repeat,
    radial-gradient(circle, rgba(234, 119, 4, 0.5) 1px, transparent 1.5px) calc(100% - 1.5rem) calc(100% - 2rem) / 9rem 7rem no-repeat,
    linear-gradient(135deg, transparent 0 64%, rgba(234, 119, 4, 0.12) 64.2%, transparent 64.8%) right top / 28rem 28rem no-repeat,
    linear-gradient(125deg, #263240 0%, #013a51 100%);
}

.articles-hero::before {
  position: absolute;
  top: 3.75rem;
  right: 11%;
  width: 13rem;
  height: 13rem;
  border: 1px solid rgba(234, 119, 4, 0.25);
  background-image: radial-gradient(circle, rgba(234, 119, 4, 0.56) 1px, transparent 1.4px);
  background-size: 16px 16px;
  content: "";
  opacity: 0.34;
  transform: rotate(12deg);
  clip-path: polygon(18% 0, 100% 0, 100% 82%, 82% 100%, 0 100%, 0 18%);
}

.articles-hero::after {
  position: absolute;
  right: -7rem;
  bottom: -11rem;
  width: 28rem;
  height: 28rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  content: "";
}

.articles-hero .breadcrumb {
  position: relative;
  z-index: 1;
}

.articles-hero .breadcrumb,
.articles-hero .breadcrumb [aria-current="page"] {
  color: rgba(255, 255, 255, 0.72);
}

.articles-hero .breadcrumb a:hover {
  color: var(--white);
}

.articles-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  padding: 3.25rem 0 4.25rem;
  gap: 2.5rem;
}

.articles-hero .eyebrow {
  color: #ea7704;
}

.articles-hero-copy {
  max-width: 760px;
}

.articles-hero h1 {
  max-width: 15ch;
  color: var(--white);
  font-size: clamp(2.45rem, 10vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.articles-hero-copy > p:not(.eyebrow) {
  max-width: 66ch;
  margin-top: 1.25rem;
  color: rgba(255, 255, 255, 0.84);
  font-size: 1rem;
}

.articles-hero-actions {
  display: flex;
  margin-top: 1.75rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.articles-text-link {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  gap: 0.4rem;
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.48);
  text-underline-offset: 5px;
}

.articles-text-link span {
  transition: transform 0.16s ease;
}

.articles-text-link:hover span,
.articles-text-link:focus-visible span {
  transform: translateX(3px);
}

.articles-hero-note {
  max-width: 430px;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.articles-hero-note-number {
  display: block;
  margin-bottom: 0.8rem;
  color: var(--orange);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.articles-hero-note .articles-hero-note-label {
  margin-bottom: 0.55rem;
  color: var(--white);
  font-weight: 600;
}

.articles-hero-note p:last-child {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
}

.articles-featured-section,
.articles-library {
  padding: 4rem 0;
}

.articles-section-heading {
  display: grid;
  margin-bottom: 1.75rem;
  gap: 1rem;
}

.articles-section-heading h2 {
  max-width: 20ch;
  font-size: clamp(1.85rem, 7vw, 2.8rem);
  letter-spacing: -0.03em;
}

.articles-section-heading > p {
  max-width: 68ch;
  color: var(--body-dark);
}

.featured-article {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.featured-article::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--orange);
  content: "";
}

.featured-article-copy {
  padding: 1.7rem 1.5rem 1.7rem 1.75rem;
}

.article-card-category {
  display: inline-flex;
  width: fit-content;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  color: #9d4b00;
  background: #fff1e2;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1.3;
  text-transform: uppercase;
}

.featured-article h3 {
  max-width: 25ch;
  margin-top: 0.8rem;
  font-size: clamp(1.55rem, 6vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.featured-article h3 a:hover,
.featured-article h3 a:focus-visible,
.article-card h2 a:hover,
.article-card h2 a:focus-visible {
  color: var(--teal);
}

.featured-article-copy > p:not(.article-card-category) {
  max-width: 66ch;
  margin-top: 0.9rem;
  color: var(--body-dark);
}

.article-card-meta,
.article-meta {
  display: flex;
  margin-top: 1rem;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  color: var(--body-text);
  font-size: 0.75rem;
}

.article-card-meta span {
  position: relative;
  padding-left: 0.9rem;
}

.article-card-meta span::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--orange);
  content: "";
  transform: translateY(-50%);
}

.featured-article-link,
.article-card-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.4rem;
  color: var(--teal);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(1, 58, 81, 0.34);
  text-underline-offset: 4px;
}

.featured-article-link {
  margin-top: 1.15rem;
}

.featured-article-link span,
.article-card-link span {
  transition: transform 0.16s ease;
}

.featured-article-link:hover span,
.featured-article-link:focus-visible span,
.article-card-link:hover span,
.article-card-link:focus-visible span {
  transform: translateX(3px);
}

.featured-article-mark {
  display: flex;
  min-height: 150px;
  padding: 1.5rem;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--white);
  background:
    linear-gradient(135deg, rgba(1, 58, 81, 0.96), rgba(38, 50, 64, 0.98)),
    url("/assets/images/home/features-background.webp") center / cover;
}

.featured-article-mark span {
  color: var(--orange);
  font-size: clamp(3.2rem, 18vw, 6rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.06em;
}

.featured-article-mark strong {
  margin-top: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.articles-library {
  background-color: var(--surface);
  background-image: linear-gradient(rgba(247, 248, 250, 0.68), rgba(247, 248, 250, 0.68)), url("/assets/images/home/features-background.webp");
  background-position: center;
  background-size: cover;
}

.article-grid {
  display: grid;
  gap: 1rem;
}

.article-card,
.article-empty {
  min-width: 0;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow-card);
}

.article-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.article-card:hover {
  border-color: rgba(234, 119, 4, 0.45);
  box-shadow: 0 14px 34px rgba(54, 66, 83, 0.12);
  transform: translateY(-2px);
}

.article-card h2 {
  margin-top: 0.8rem;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.article-card > p:not(.article-card-category) {
  margin-top: 0.75rem;
  color: var(--body-dark);
  font-size: 0.92rem;
}

.article-card .article-card-meta {
  margin-top: auto;
  padding-top: 1.15rem;
}

.article-card-link {
  margin-top: 0.6rem;
}

.article-empty {
  text-align: center;
}

.article-empty h2 {
  font-size: clamp(1.55rem, 7vw, 2.25rem);
}

.article-empty p:last-child {
  max-width: 42rem;
  margin: 0.65rem auto 0;
  color: var(--body-text);
}

/* Individual article pages */
.article-header {
  padding: 2.5rem 0 2rem;
  background: var(--surface);
}

.article-header-inner {
  max-width: 55rem;
}

.article-header h1 {
  margin-top: 0.45rem;
  color: var(--heading);
  font-size: clamp(2rem, 9vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.article-description {
  max-width: 48rem;
  margin-top: 1rem;
  color: var(--body-text);
  font-size: 1rem;
}

.article-topics {
  display: grid;
  margin-top: 1rem;
  gap: 0.45rem;
}

.article-topics-label {
  color: var(--heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.article-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
}

.article-tag {
  padding: 0.28rem 0.55rem;
  border: 1px solid rgba(234, 119, 4, 0.32);
  border-radius: 999px;
  color: var(--heading);
  background: #fff8f0;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
}

.article-layout {
  max-width: 55rem;
  padding-top: 2rem;
  padding-bottom: 3.5rem;
}

.article-featured {
  overflow: hidden;
  margin-bottom: 2rem;
  border-radius: var(--radius);
}

.article-featured img {
  width: 100%;
  height: auto;
}

.article-prose {
  max-width: 46rem;
  color: var(--body-text);
  font-size: 1rem;
  line-height: 1.75;
}

.article-prose > * + * {
  margin-top: 1.15rem;
}

.article-prose h2,
.article-prose h3,
.article-prose h4 {
  color: var(--heading);
  line-height: 1.25;
}

.article-prose h2 {
  margin-top: 2.25rem;
  font-size: 1.55rem;
}

.article-prose h3 {
  margin-top: 1.8rem;
  font-size: 1.25rem;
}

.article-prose ul,
.article-prose ol {
  padding-left: 1.25rem;
}

.article-prose ul {
  list-style: disc;
}

.article-prose ol {
  list-style: decimal;
}

.article-prose li + li {
  margin-top: 0.45rem;
}

.article-prose a {
  color: var(--orange-strong, #b95700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-prose blockquote {
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--orange);
  background: var(--surface);
}

@media (min-width: 680px) {
  .article-topics {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
  }

  .article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .article-empty {
    grid-column: 1 / -1;
    padding: 2rem;
  }

  .featured-article {
    grid-template-columns: minmax(0, 1.6fr) minmax(190px, 0.55fr);
  }

  .featured-article-copy {
    padding: 2.25rem 2rem 2.25rem 2.25rem;
  }
}

@media (min-width: 860px) {
  .articles-hero-inner {
    min-height: 500px;
    padding: 4.5rem 0 5.25rem;
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.55fr);
    align-items: end;
    gap: 5rem;
  }

  .articles-hero h1 {
    font-size: clamp(3.4rem, 5.5vw, 4.8rem);
  }

  .articles-hero-copy > p:not(.eyebrow) {
    font-size: 1.04rem;
  }

  .articles-featured-section,
  .articles-library {
    padding: 5.25rem 0;
  }

  .articles-section-heading {
    margin-bottom: 2.2rem;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.75fr);
    align-items: end;
    gap: 4rem;
  }

  .articles-section-heading--library {
    align-items: center;
  }

  .featured-article-mark {
    min-height: 340px;
    padding: 2rem;
  }

  .article-grid {
    gap: 1.25rem;
  }

  .article-card {
    padding: 1.7rem;
  }

  .article-card h2 {
    font-size: 1.3rem;
  }

  .article-header {
    padding: 4.5rem 0 3.5rem;
  }

  .article-layout {
    padding-top: 3rem;
    padding-bottom: 5rem;
  }

  .article-prose {
    font-size: 1.04rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .articles-text-link span,
  .featured-article-link span,
  .article-card-link span,
  .article-card {
    transition: none;
  }
}

/* Resource library controls */
.article-tools{display:grid;margin-bottom:1.5rem;padding:1.2rem;gap:1rem;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.94);box-shadow:var(--shadow-card)}
.article-tool{display:grid;gap:.4rem}.article-tool>span{color:var(--heading);font-size:.72rem;font-weight:700;letter-spacing:.045em;text-transform:uppercase}
.article-tool input,.article-tool select{width:100%;min-width:0;height:48px;padding:0 .85rem;border:1px solid #cfd5dc;border-radius:8px;color:var(--heading);background:var(--white);font:inherit;font-size:.88rem}
.article-tool input::placeholder{color:#7c8795}.article-tool input:hover,.article-tool select:hover{border-color:#aab4bf}
.article-tool input:focus,.article-tool select:focus{border-color:var(--teal);outline:3px solid rgba(1,58,81,.14);outline-offset:1px}
.article-tools-footer{display:flex;min-height:36px;align-items:center;justify-content:space-between;gap:1rem}.article-tools-footer p{color:var(--body-dark);font-size:.8rem;font-weight:600}
.article-clear{padding:.35rem 0;border:0;color:var(--teal);background:transparent;font:inherit;font-size:.8rem;font-weight:600;text-decoration:underline;text-decoration-color:rgba(1,58,81,.34);text-underline-offset:4px;cursor:pointer}
.article-clear:hover,.article-clear:focus-visible{color:var(--orange)}
.article-filter-empty{padding:2.5rem 1.25rem;border:1px dashed #bcc5ce;border-radius:var(--radius);text-align:center;background:rgba(255,255,255,.74)}
.article-filter-empty h3{font-size:1.3rem}.article-filter-empty p{max-width:38rem;margin:.65rem auto 0;color:var(--body-dark)}.article-clear--empty{margin-top:1rem}
[data-article-card][hidden],.article-filter-empty[hidden],.articles-featured-section[hidden],.article-clear[hidden]{display:none!important}
@media(min-width:680px){.article-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.article-tool--search,.article-tools-footer{grid-column:1/-1}}
@media(min-width:960px){.article-tools{padding:1.35rem;grid-template-columns:minmax(220px,1.2fr) repeat(2,minmax(150px,.8fr));align-items:end}.article-tool--search{grid-column:auto}.article-tools-footer{grid-column:1/-1}}
@media(min-width:1180px){.article-tools{grid-template-columns:minmax(220px,1.3fr) repeat(4,minmax(130px,.7fr))}}