.resource-detail-page { --detail-ink: #1f2c31; --detail-muted: #6f7e84; --detail-line: #dbe9ed; --detail-cyan: #0e9fb3; }
.resource-detail-page main { overflow: clip; }
.resource-article-hero { padding-top: 154px; }
.resource-article-heading { width: min(900px, 100%); margin: 70px auto 0; text-align: center; }
.resource-article-meta { display: flex; justify-content: center; align-items: center; gap: 24px; color: var(--detail-cyan); font-size: 13px; }
.resource-article-meta time { color: #9aa8ac; font-size: 11px; letter-spacing: .05em; }
.resource-article-heading h1 { margin-top: 24px; color: var(--detail-ink); font-size: clamp(42px, 5.4vw, 74px); font-weight: 300; line-height: 1.2; letter-spacing: -.02em; }
.resource-article-summary { max-width: 670px; margin: 28px auto 0; color: var(--detail-muted); font-size: 17px; line-height: 1.9; }
.resource-article-byline { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 30px; color: #9aa8ac; font-size: 12px; }
.resource-article-byline a { color: #5d7b82; }
.byline-dot { width: 3px; height: 3px; border-radius: 50%; background: #75c7d3; }
.resource-detail-art { position: relative; display: grid; place-items: center; width: min(100%, 1080px); height: 370px; margin: 64px auto 0; overflow: hidden; border-radius: 16px; background: #e9f7fb; }
.resource-detail-art::before { content: ''; position: absolute; inset: 14% 22%; border: 1px solid #9ddce9; border-radius: 50%; box-shadow: 0 0 100px #8ad6e855, inset 0 0 50px #ffffffc7; }
.resource-detail-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(140deg, #dff8ff, #c9eafa 52%, #e3defb); opacity: .7; mix-blend-mode: multiply; }
.resource-detail-art > * { position: relative; z-index: 1; }
.resource-detail-art > span { color: #237d9d; font-size: clamp(76px, 12vw, 160px); font-weight: 300; letter-spacing: -.08em; }
.resource-detail-art > i { position: absolute; width: 22%; aspect-ratio: 1; border: 1px solid #fff; border-radius: 50%; box-shadow: 0 0 32px #fff, 0 0 90px #5ebed988; animation: detail-pulse 4.4s ease-in-out infinite; }
.resource-detail-art > b { position: absolute; right: 10%; bottom: 14%; color: #6695a3; font-size: 11px; font-weight: 400; line-height: 1.55; letter-spacing: .15em; }
@keyframes detail-pulse { 0%, 100% { transform: scale(.84); opacity: .35; } 50% { transform: scale(1.12); opacity: 1; } }
.resource-article-layout { display: grid; grid-template-columns: 180px minmax(0, 760px); gap: clamp(50px, 10vw, 150px); justify-content: center; padding-top: 116px; padding-bottom: 120px; }
.resource-toc { position: sticky; top: 120px; align-self: start; }
.resource-toc > span { display: block; margin-bottom: 18px; color: #95a3a7; font-size: 11px; letter-spacing: .12em; }
.resource-toc nav { display: flex; flex-direction: column; gap: 13px; border-left: 1px solid #d6e5e9; }
.resource-toc a { position: relative; padding-left: 16px; color: #829196; font-size: 13px; line-height: 1.4; transition: color .2s ease; }
.resource-toc a::before { content: ''; position: absolute; top: .52em; left: -2px; width: 3px; height: 3px; border-radius: 50%; background: #c1d9de; }
.resource-toc a:hover, .resource-toc a:focus-visible, .resource-toc a.is-active { color: #078fa6; }
.resource-toc a.is-active::before { width: 5px; height: 5px; left: -3px; background: #0eafc1; box-shadow: 0 0 0 4px #0eafc11c; }
.resource-article-body { min-width: 0; }
.resource-body-section { position: relative; padding: 4px 0 82px; border-bottom: 1px solid var(--detail-line); }
.resource-body-section + .resource-body-section { padding-top: 82px; }
.resource-body-section:last-of-type { border-bottom: 0; }
.resource-body-section > .kicker { margin-bottom: 18px; }
.resource-body-section h2 { max-width: 16em; color: var(--detail-ink); font-size: clamp(30px, 3.4vw, 48px); font-weight: 300; line-height: 1.25; }
.resource-body-section > p, .resource-body-section > div > p, [data-section-context-body] > p, [data-section-method-body] > p, [data-section-practice-body] > p, [data-section-takeaway-body] > p { color: #607178; font-size: 16px; line-height: 2; }
.resource-body-section > p { max-width: 680px; margin-top: 26px; }
.resource-section-number { position: absolute; top: 5px; right: 0; color: #b5c7cb; font-family: Manrope, sans-serif; font-size: 12px; letter-spacing: .1em; }
.resource-body-section + .resource-body-section .resource-section-number { top: 82px; }
.resource-body-section > div > p, [data-section-context-body], [data-section-method-body], [data-section-practice-body], [data-section-takeaway-body] { margin-top: 30px; }
.resource-body-section > div > p + p { margin-top: 18px; }
.resource-quote { margin-top: 28px; padding: 25px 30px; border-left: 2px solid #73c5d3; color: #426f79; background: #f1fafc; font-size: 19px; font-weight: 300; line-height: 1.7; }
.resource-data-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 32px; }
.resource-data-row > div { padding: 22px 20px; border: 1px solid #d8e9ed; border-radius: 8px; background: #fbfeff; }
.resource-data-row strong { display: block; color: #138ca0; font-size: 42px; font-weight: 300; line-height: 1; }
.resource-data-row span { display: block; margin-top: 12px; color: #72848a; font-size: 12px; }
.resource-article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.resource-article-tags a { padding: 7px 13px; border: 1px solid #d5e7eb; border-radius: 999px; color: #5b7b82; background: #f8fcfd; font-size: 11px; }
.resource-article-tags a:hover, .resource-article-tags a:focus-visible { border-color: #86d4df; color: #087f92; background: #effbfd; }
.resource-author-block { display: flex; align-items: flex-start; gap: 18px; margin-top: 68px; padding-top: 28px; border-top: 1px solid var(--detail-line); }
.author-avatar { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #1b7890; background: linear-gradient(145deg, #dff8ff, #c3def8); font-size: 20px; font-weight: 300; }
.resource-author-block > div:last-child > span { color: #93a2a6; font-size: 11px; }
.resource-author-block h3 { margin-top: 6px; color: var(--detail-ink); font-size: 18px; font-weight: 400; }
.resource-author-block h3 a { color: inherit; }
.resource-author-block h3 a:hover, .resource-author-block h3 a:focus-visible { color: #078fa6; }
.resource-author-block p { max-width: 440px; margin-top: 7px; color: #75858a; font-size: 13px; line-height: 1.7; }
.related-resources { padding-bottom: 122px; }
.related-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--detail-line); }
.related-heading h2 { margin-top: 14px; color: var(--detail-ink); font-size: clamp(34px, 4vw, 54px); font-weight: 300; }
.text-link { display: inline-flex; align-items: center; gap: 12px; color: #0a8ca1; font-size: 13px; }
.text-link span { font-size: 18px; transition: transform .2s ease; }
.text-link:hover span, .text-link:focus-visible span { transform: translate(3px, -3px); }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 42px; }
.related-card { display: flex; min-height: 210px; flex-direction: column; padding: 23px 24px; border: 1px solid #d7e7ea; border-radius: 10px; color: inherit; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.related-card:hover, .related-card:focus-visible { border-color: #8bd3de; box-shadow: 0 18px 35px #559bab19; transform: translateY(-4px); }
.related-card > span { color: #0e9fb3; font-size: 12px; }
.related-card h3 { max-width: 14em; margin-top: 28px; color: var(--detail-ink); font-size: 22px; font-weight: 300; line-height: 1.45; }
.related-card small { margin-top: auto; color: #9aa7aa; font-size: 11px; }
.resource-detail-hello { margin-top: 0; }
@media (max-width: 1000px) {
  .resource-article-hero { padding-top: 120px; }
  .resource-article-heading { margin-top: 54px; }
  .resource-detail-art { height: 300px; margin-top: 48px; }
  .resource-article-layout { grid-template-columns: 145px minmax(0, 1fr); gap: 40px; padding-top: 84px; }
}
@media (max-width: 760px) {
  .resource-article-hero { padding-top: 42px; }
  .resource-article-heading { margin-top: 42px; text-align: left; }
  .resource-article-meta { justify-content: flex-start; }
  .resource-article-heading h1 { margin-top: 20px; font-size: 40px; }
  .resource-article-summary { margin-top: 22px; font-size: 15px; }
  .resource-article-byline { justify-content: flex-start; flex-wrap: wrap; margin-top: 24px; }
  .resource-detail-art { height: 240px; margin-top: 36px; border-radius: 10px; }
  .resource-article-layout { display: block; padding-top: 60px; padding-bottom: 84px; }
  .resource-toc { position: sticky; top: 66px; z-index: 3; padding: 14px 0; overflow-x: auto; border-bottom: 1px solid var(--detail-line); background: #fff; }
  .resource-toc > span { display: none; }
  .resource-toc nav { flex-direction: row; gap: 20px; overflow-x: auto; border-left: 0; white-space: nowrap; }
  .resource-toc a { padding: 0; font-size: 12px; }
  .resource-toc a::before { display: none; }
  .resource-toc a.is-active { color: #078fa6; }
  .resource-article-body { margin-top: 46px; }
  .resource-body-section { padding-bottom: 60px; }
  .resource-body-section + .resource-body-section { padding-top: 60px; }
  .resource-section-number { top: 4px; }
  .resource-body-section + .resource-body-section .resource-section-number { top: 60px; }
  .resource-body-section h2 { font-size: 31px; }
  .resource-body-section > p, .resource-body-section > div > p, [data-section-context-body] > p, [data-section-method-body] > p, [data-section-practice-body] > p, [data-section-takeaway-body] > p { font-size: 15px; line-height: 1.9; }
  .resource-data-row { gap: 8px; }
  .resource-data-row > div { padding: 16px 12px; }
  .resource-data-row strong { font-size: 32px; }
  .resource-data-row span { font-size: 10px; }
  .related-resources { padding-bottom: 84px; }
  .related-heading { align-items: flex-start; flex-direction: column; }
  .related-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .related-card { min-height: 170px; }
}
@media (prefers-reduced-motion: reduce) { .resource-detail-art > i, .text-link span, .related-card { animation: none; transition: none; } }