:root { --blog-ink: #132936; --blog-muted: #36515e; --blog-navy: #103d58; --blog-teal: #137c78; --blog-amber: #f2b134; --blog-paper: #ffffff; --blog-canvas: #f5f8f7; --blog-line: #b6cbd0; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--blog-canvas); color: var(--blog-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 20; padding: 10px 14px; background: var(--blog-amber); color: var(--blog-ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.blog-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 12px clamp(20px, 5vw, 72px); background: var(--blog-navy); color: #fff; border-bottom: 3px solid var(--blog-amber); }
.blog-brand { color: #fff; font-size: 1.18rem; font-weight: 850; text-decoration: none; letter-spacing: -.03em; }
.blog-brand span { color: #bce8d8; }.blog-brand em { color: var(--blog-amber); font-style: normal; }
.blog-nav { display: flex; flex-wrap: wrap; gap: 9px; }.blog-nav a { border: 1px solid rgba(255,255,255,.7); border-radius: 8px; padding: 8px 11px; color: #fff; font-size: .86rem; font-weight: 750; text-decoration: none; }.blog-nav a:hover, .blog-nav a:focus-visible { border-color: #fff; background: rgba(255,255,255,.13); outline: none; }
.blog-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: clamp(42px, 7vw, 88px) 0 90px; }
.blog-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr); gap: clamp(24px, 6vw, 70px); align-items: end; padding-bottom: clamp(35px, 6vw, 62px); border-bottom: 1px solid var(--blog-line); }.eyebrow { margin: 0 0 12px; color: var(--blog-teal); font-size: .78rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }.blog-hero h1 { max-width: 800px; margin: 0; color: var(--blog-navy); font-size: clamp(2.65rem, 6.5vw, 5.8rem); letter-spacing: -.075em; line-height: .91; text-wrap: balance; }.blog-hero p { max-width: 620px; color: var(--blog-muted); font-size: clamp(1rem, 1.8vw, 1.17rem); line-height: 1.7; }.why-card { border-left: 5px solid var(--blog-amber); padding: 22px; background: #fff8df; box-shadow: 9px 9px 0 #d9ebe7; }.why-card h2 { margin: 0 0 10px; color: var(--blog-navy); font-size: 1.1rem; }.why-card p { margin: 0; font-size: .97rem; }
.article-index { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 10px; margin: 34px 0 58px; overflow-x: auto; padding-bottom: 6px; }.article-index a { min-height: 84px; border: 1px solid var(--blog-line); padding: 13px; background: var(--blog-paper); color: var(--blog-navy); font-size: .86rem; font-weight: 800; text-decoration: none; }.article-index a:hover, .article-index a:focus-visible { border-color: var(--blog-teal); box-shadow: inset 0 -4px 0 var(--blog-teal); outline: none; }
.article-list { display: grid; gap: 26px; }.blog-article { scroll-margin-top: 92px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(245px, .38fr); gap: clamp(24px, 5vw, 68px); border-top: 4px solid var(--blog-navy); padding: clamp(28px, 5vw, 52px) 0; }.article-number { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px; border-radius: 50%; background: var(--blog-teal); color: #fff; font-weight: 900; }.blog-article h2 { max-width: 760px; margin: 0 0 18px; color: var(--blog-navy); font-size: clamp(1.85rem, 3.8vw, 3.4rem); letter-spacing: -.052em; line-height: 1; text-wrap: balance; }.blog-article p { max-width: 720px; color: var(--blog-muted); line-height: 1.75; }.blog-article strong { color: var(--blog-ink); }.article-actions { margin-top: 22px; }.article-actions a { display: inline-flex; align-items: center; min-height: 44px; border: 2px solid var(--blog-navy); padding: 0 15px; background: var(--blog-navy); color: #fff; font-weight: 800; text-decoration: none; }.article-actions a:hover, .article-actions a:focus-visible { background: var(--blog-teal); border-color: var(--blog-teal); outline: none; }
.upskill-card { align-self: start; border: 1px solid var(--blog-line); padding: 20px; background: var(--blog-paper); }.upskill-card h3 { margin: 0 0 10px; color: var(--blog-teal); font-size: .86rem; letter-spacing: .08em; text-transform: uppercase; }.upskill-card ol { margin: 0; padding-left: 20px; color: var(--blog-muted); line-height: 1.7; }.upskill-card li + li { margin-top: 8px; }.blog-footer { padding: 36px clamp(20px, 5vw, 72px); background: var(--blog-navy); color: #d8ecec; }.blog-footer p { max-width: 720px; margin: 0; line-height: 1.6; }.blog-footer a { color: #fff; font-weight: 800; }
@media (max-width: 760px) { .blog-header { align-items: flex-start; flex-direction: column; }.blog-shell { width: min(100% - 30px, 680px); }.blog-hero, .blog-article { grid-template-columns: 1fr; }.article-index { grid-template-columns: repeat(7, 160px); margin-bottom: 38px; }.blog-hero h1 { font-size: clamp(2.55rem, 14vw, 4.2rem); }.upskill-card { order: -1; } }