.article-page { background: var(--ap-paper); }
.blog-article { position: relative; overflow: clip; padding: 0; background: var(--ap-paper); }
.blog-article::before { content: ""; position: absolute; inset: 0 0 auto; height: 760px; pointer-events: none; background: radial-gradient(circle at 82% 24%,rgba(184,119,47,.13),transparent 25%), radial-gradient(circle at 12% 68%,rgba(49,85,126,.1),transparent 30%), linear-gradient(145deg,#fffdf8,var(--ap-paper)); }
.blog-article::after { content: ""; position: absolute; inset: 0 0 auto; height: 760px; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(30,58,95,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(30,58,95,.04) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom,transparent 0,#000 20%,#000 76%,transparent); }
.blog-article-container { position: relative; z-index: 1; width: min(calc(100% - 48px),var(--ap-shell)); margin-inline: auto; padding: 0 0 clamp(110px,13vw,180px); display: grid; grid-template-columns: minmax(190px,240px) minmax(0,780px) minmax(0,1fr); column-gap: clamp(44px,6vw,86px); align-items: start; }

.blog-article-header { position: relative; grid-column: 1 / -1; min-height: 710px; display: flex; flex-direction: column; justify-content: flex-end; padding: 150px 0 90px; margin-bottom: 80px; border-bottom: 1px solid var(--ap-line); isolation: isolate; }
.blog-article-header::before { content: "FIELD NOTE"; position: absolute; right: -.03em; top: .26em; z-index: -1; color: var(--ap-navy); font: 600 clamp(8rem,18vw,18rem)/.8 var(--ap-heading); letter-spacing: -.08em; opacity: .025; white-space: nowrap; }
.blog-article-header::after { content: ""; position: absolute; width: min(35vw,480px); aspect-ratio: 1; right: -12%; top: 13%; z-index: -1; border: 1px dashed rgba(184,119,47,.28); border-radius: 50%; }
.blog-article-header .blog-card-meta { margin-bottom: 30px; }
.blog-article-header .blog-card-meta span { display: inline-flex; align-items: center; gap: 8px; color: var(--ap-gold); font-size: .66rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.blog-article-header .blog-card-meta a { color: inherit !important; text-decoration: none; }
.blog-article-header h1 { max-width: 1100px; margin: 0; color: var(--ap-navy); font: 600 clamp(4.2rem,7.4vw,8rem)/.92 var(--ap-heading); letter-spacing: -.062em; text-wrap: balance; }
.blog-article-meta { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 34px; color: var(--ap-muted); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.blog-article-meta span { display: inline-flex; align-items: center; }
.article-category { color: var(--ap-gold) !important; }
.blog-article-hero { display: none !important; }

.article-rail { grid-column: 1; position: sticky; top: 96px; min-width: 0; padding-top: 4px; }
.article-library-link { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px; color: var(--ap-navy); font-size: .65rem; font-weight: 750; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.article-library-link span { color: var(--ap-gold); transition: transform .25s var(--ap-ease); }
.article-library-link:hover span { transform: translate(-3px,0); }
.article-toc { border-top: 1px solid var(--ap-line); border-bottom: 1px solid var(--ap-line); }
.article-toc summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 17px 0; color: var(--ap-gold); font-size: .62rem; font-weight: 750; letter-spacing: .15em; list-style: none; text-transform: uppercase; cursor: pointer; }
.article-toc summary::-webkit-details-marker { display: none; }
.article-toc summary::after { content: "+"; color: var(--ap-navy); font-size: 1rem; font-weight: 400; }
.article-toc[open] summary::after { content: "−"; }
.article-toc nav { display: flex; flex-direction: column; gap: 2px; padding: 0 0 17px; }
.article-toc a { position: relative; padding: 7px 0 7px 16px; color: var(--ap-muted); font-size: .72rem; line-height: 1.45; text-decoration: none; transition: color .2s ease, transform .2s var(--ap-ease); }
.article-toc a::before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 1px; background: var(--ap-line); transition: width .2s var(--ap-ease), background .2s ease; }
.article-toc a:hover, .article-toc a.is-current { color: var(--ap-navy); transform: translateX(3px); }
.article-toc a.is-current::before { width: 10px; background: var(--ap-gold); }
.article-reading-note { margin: 22px 0 0; color: var(--ap-muted); font-size: .66rem; line-height: 1.65; }

.blog-article-body { grid-column: 2; min-width: 0; color: #2d3748; font-size: clamp(1rem,1.15vw,1.075rem); line-height: 1.9; }
.blog-article-body > p:first-child { margin-top: 0; color: var(--ap-ink); font: 500 clamp(1.2rem,1.8vw,1.48rem)/1.72 var(--ap-heading); }
.blog-article-body p { margin: 0 0 1.45em; }
.blog-article-body h2 { margin: clamp(72px,8vw,105px) 0 24px; color: var(--ap-navy); font: 600 clamp(2.3rem,4vw,3.7rem)/1.02 var(--ap-heading); letter-spacing: -.045em; scroll-margin-top: 100px; text-wrap: balance; }
.blog-article-body h2::before { content: attr(data-article-index); display: block; margin-bottom: 12px; color: var(--ap-gold); font: 750 .62rem/1 var(--ap-body); letter-spacing: .15em; }
.blog-article-body h3 { margin: 46px 0 15px; color: var(--ap-navy); font: 600 clamp(1.45rem,2.2vw,2rem)/1.15 var(--ap-heading); letter-spacing: -.025em; scroll-margin-top: 100px; }
.blog-article-body h4 { margin: 34px 0 12px; color: var(--ap-navy); font-size: 1rem; }
.blog-article-body ul, .blog-article-body ol { margin: 0 0 1.8em; padding-left: 1.25em; }
.blog-article-body li { margin: .58em 0; padding-left: .35em; }
.blog-article-body li::marker { color: var(--ap-gold); font-weight: 700; }
.blog-article-body a { color: var(--ap-navy); font-weight: 650; text-decoration-color: rgba(184,119,47,.55); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.blog-article-body a:hover { color: var(--ap-gold); }
.blog-article-body blockquote { position: relative; margin: 54px 0; padding: 34px 38px 34px 48px; overflow: hidden; border: 0; background: var(--ap-navy); color: #fff; font: 500 clamp(1.35rem,2.2vw,2rem)/1.55 var(--ap-heading); }
.blog-article-body blockquote::before { content: "“"; position: absolute; left: 10px; top: -20px; color: var(--ap-gold-bright); font: 600 7rem/1 var(--ap-heading); opacity: .38; }
.blog-article-body blockquote p, .blog-article-body blockquote strong { position: relative; color: inherit; }
.blog-article-body hr { height: 1px; margin: 58px 0; border: 0; background: var(--ap-line); }
.blog-article-body img { width: 100%; height: auto; margin: 42px 0; border: 1px solid var(--ap-line); }
.blog-article-body code { padding: .12em .38em; background: var(--ap-paper-deep); color: var(--ap-navy); font-size: .9em; }

.blog-article-body [style*="background:#f0f4ff"],
.blog-article-body [style*="background: #f0f4ff"] { padding: 18px 20px !important; border: 1px solid rgba(184,119,47,.2) !important; border-left: 3px solid var(--ap-gold) !important; border-radius: 0 !important; background: rgba(255,255,255,.48) !important; color: var(--ap-ink) !important; }
.blog-article-body [style*="border-radius:12px"],
.blog-article-body [style*="border-radius: 12px"] { border-radius: 0 !important; }
.blog-article-body .table-wrapper, .blog-article-body [style*="overflow-x:auto"], .blog-article-body [style*="overflow-x: auto"] { width: 100%; max-width: 100%; overflow-x: auto !important; margin: 34px 0; border: 1px solid var(--ap-line); }
.article-table-scroll { width: 100%; max-width: 100%; overflow-x: auto !important; margin: 0 0 34px !important; border: 1px solid var(--ap-line); overscroll-behavior-inline: contain; }
.article-table-hint { display: none; }
.blog-article-body table { width: 100%; min-width: 620px; border-collapse: collapse; background: rgba(255,255,255,.35); font-size: .82rem; line-height: 1.55; }
.blog-article-body th { padding: 13px 12px !important; border: 1px solid rgba(255,255,255,.12) !important; background: var(--ap-navy) !important; color: #fff !important; font-size: .64rem; font-weight: 750 !important; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.blog-article-body td { padding: 12px !important; border: 1px solid var(--ap-line) !important; background: transparent !important; color: var(--ap-ink); vertical-align: top; }

.related-links { margin: 72px 0 0 !important; padding: 30px 32px !important; border: 1px solid var(--ap-line) !important; border-left: 3px solid var(--ap-gold) !important; border-radius: 0 !important; background: rgba(255,255,255,.42) !important; }
.related-links h3 { margin: 0 0 14px !important; color: var(--ap-navy) !important; font: 600 1.4rem/1.2 var(--ap-heading) !important; }
.related-links ul { margin: 0 !important; padding-left: 1.1em !important; line-height: 1.65 !important; }
.related-links li { margin: .55em 0; }
.blog-article-cta { position: relative; margin: 72px 0 0; padding: clamp(34px,5vw,54px); overflow: hidden; border-radius: 0; background: var(--ap-navy-deep); color: #fff; }
.blog-article-cta::after { content: ""; position: absolute; width: 210px; aspect-ratio: 1; right: -135px; bottom: -135px; border: 1px solid rgba(221,168,95,.38); border-radius: 50%; }
.blog-article-cta h3 { position: relative; margin: 0 0 13px; color: #fff; font: 600 clamp(2rem,3.5vw,3.2rem)/1 var(--ap-heading); letter-spacing: -.04em; }
.blog-article-cta p { position: relative; max-width: 50ch; margin: 0 0 25px; color: rgba(255,255,255,.62); }
.blog-article-cta a { position: relative; display: inline-flex; min-height: 48px; align-items: center; padding: 0 19px; border: 1px solid #fff; background: #fff; color: var(--ap-navy-deep); font-size: .78rem; font-weight: 750; text-decoration: none; transition: transform .25s var(--ap-ease), background .25s ease, border-color .25s ease; }
.blog-article-cta a:hover { transform: translateY(-2px); border-color: var(--ap-gold-bright); background: var(--ap-gold-bright); color: var(--ap-navy-deep); }

.article-next { grid-column: 2; margin-top: 82px; padding-top: 28px; border-top: 1px solid var(--ap-line); }
.article-next > span { color: var(--ap-gold); font-size: .62rem; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
.article-next a { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-top: 18px; color: var(--ap-navy); text-decoration: none; }
.article-next strong { max-width: 18ch; font: 600 clamp(1.8rem,3vw,2.7rem)/1.04 var(--ap-heading); letter-spacing: -.04em; }
.article-next i { color: var(--ap-gold); font-style: normal; font-size: 1.4rem; transition: transform .25s var(--ap-ease); }
.article-next a:hover i { transform: translate(4px,-4px); }

@media (max-width: 1100px) {
  .blog-article-container { grid-template-columns: minmax(170px,210px) minmax(0,720px); }
  .blog-article-header { min-height: 650px; }
  .article-next { grid-column: 2; }
}

@media (max-width: 860px) {
  .blog-article-container { grid-template-columns: minmax(0,1fr); column-gap: 0; }
  .blog-article-header { grid-column: 1; min-height: auto; padding: 150px 0 70px; margin-bottom: 50px; }
  .blog-article-header h1 { font-size: clamp(3.2rem,11vw,5.6rem); }
  .article-rail { grid-column: 1; position: static; margin-bottom: 48px; }
  .article-library-link { margin-bottom: 16px; }
  .article-toc nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px 20px; }
  .blog-article-body, .article-next { grid-column: 1; width: min(100%,760px); margin-inline: auto; }
}

@media (max-width: 560px) {
  .blog-article-container { width: min(calc(100% - 32px),var(--ap-shell)); }
  .blog-article-header { padding: 120px 0 52px; margin-bottom: 34px; }
  .blog-article-header::before { top: .5em; font-size: 8rem; }
  .blog-article-header::after { width: 84vw; right: -42%; top: 17%; }
  .blog-article-header h1 { font-size: clamp(2.9rem,14vw,4.6rem); }
  .blog-article-meta { gap: 9px 16px; margin-top: 24px; font-size: .58rem; }
  .article-toc nav { grid-template-columns: 1fr; }
  .blog-article-body { font-size: 1rem; line-height: 1.82; }
  .blog-article-body > p:first-child { font-size: 1.16rem; }
  .blog-article-body h2 { margin-top: 66px; font-size: clamp(2.15rem,11vw,3rem); }
  .blog-article-body h3 { font-size: 1.55rem; }
  .blog-article-body blockquote { margin-inline: 0; padding: 30px 24px 30px 38px; }
  .article-table-hint { display: flex; align-items: center; justify-content: space-between; margin: 30px 0 9px !important; color: var(--ap-gold); font-size: .62rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
  .related-links { padding: 24px 22px !important; }
  .blog-article-cta { margin-top: 56px; padding: 30px 24px; }
}