/* Articles: card grid plus the article modal panels, loaded by assets/js/articles.js. */
#main article.article-wide{width:80rem;max-width:calc(100vw - 4rem);padding:3.5rem 2.5rem 1.5rem}
#main article.section-articles{min-height:34rem}
/* a.1 — intro spans the full grid width (same left/right edge as the cards) */
.articles-intro{max-width:none;width:100%;color:rgba(255,255,255,.78);margin-bottom:2.5rem;text-wrap:pretty}
/* a.3 — 3 x N grid: rows are added automatically as cards are added */
.articles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;align-items:stretch;gap:1.25rem}
.article-card{display:flex;min-height:15rem;flex-direction:column;align-items:flex-start;padding:1.5rem;border:1px solid rgba(255,255,255,.2);border-radius:4px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.015));color:#fff;text-decoration:none;transition:transform .2s ease,background-color .2s ease,border-color .2s ease;overflow:hidden}
/* a.2 — neutral hover, no magenta */
.article-card:hover{transform:translateY(-.3rem);border-color:rgba(255,255,255,.55);background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04))}
.article-card:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:3px}
/* Kicker: small uppercase label above an article title. Unused today, kept
   because a future article may reintroduce it. */
.article-kicker{display:block;margin-bottom:1.5rem;color:rgba(255,255,255,.55);font-size:.62rem;font-weight:600;letter-spacing:.12rem;line-height:1.4;text-transform:uppercase}
.article-card h3{margin-top:0;font-size:1.18rem;line-height:1.45;letter-spacing:.04rem;margin-bottom:1rem}
.article-card p{color:rgba(255,255,255,.72);font-size:.8rem;line-height:1.65;margin:0}
.article-card__link{margin-top:auto;padding-top:1.5rem;color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.06rem}
/* Peer-reviewed work: separated from the LinkedIn grid, spans the full width */
.articles-academic{margin-top:2.5rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.15)}
.articles-subhead{margin:0 0 1.25rem;color:rgba(255,255,255,.55);font-size:.62rem;font-weight:600;letter-spacing:.12rem;line-height:1.4;text-transform:uppercase}
.article-card--wide{width:100%;min-height:0;flex-direction:row;align-items:center;justify-content:space-between;gap:2rem;padding:1.75rem 2rem}
.article-card__thumb{flex:0 0 auto;display:block;width:6.5rem;height:6.5rem;border-radius:3px;object-fit:cover;transform:rotate(-6deg);box-shadow:0 .6rem 1.4rem rgba(0,0,0,.45);transition:transform .2s ease}
.article-card--wide:hover .article-card__thumb{transform:rotate(0) scale(1.03)}
.article-card--wide .article-card__body{flex:1 1 auto;min-width:0}
.article-card--wide h3{margin-bottom:.6rem}
.article-card--wide p{max-width:56rem}
.article-card--wide .article-card__link{flex:0 0 auto;margin-top:0;padding-top:0;white-space:nowrap}
/* The LinkedIn note sits inside #insights, where main.css styles every <p> with
   a selector of higher specificity (#main article.section-insights p). A bare
   .articles-source class loses that contest, which is why the note rendered at
   body size. Match the specificity to win it back. */
#main article .articles-source{font-family:Manrope,sans-serif;font-size:.72rem;font-weight:300;line-height:1.7;letter-spacing:.02rem;color:rgba(255,255,255,.5);margin:1rem 0 2rem}
#main article .insights-link + .articles-source{margin-top:0}
/* Article modal: reading typography copied from #main article.section-about in
   main.css, so an article reads exactly like the rest of the site. */
#main article.article-detail li,#main article.article-detail p{font-family:Manrope,sans-serif;font-size:.85rem;font-weight:300;line-height:1.75;letter-spacing:.02rem;margin-bottom:1.5rem}
#main article.article-detail b,#main article.article-detail strong{font-weight:500}
#main article.article-detail h1{max-width:none;font-size:2.2rem;letter-spacing:normal;line-height:1.3;text-transform:none;margin-bottom:1.5rem}
#main article.article-detail h2{font-family:Manrope,sans-serif;font-size:.85rem;font-weight:500;line-height:1.5;letter-spacing:.02rem;text-transform:none;margin:2.25rem 0 1rem}
#main article.article-detail ul{margin-bottom:1.5rem}
#main article.article-detail li{margin-bottom:.5rem}
#main article.article-detail .image{margin-bottom:1.75rem}
.article-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin:1.5rem 0 0}
#main article.article-detail .article-actions .button{margin:0;font-family:Manrope,sans-serif;font-size:.68rem;font-weight:500;letter-spacing:.02rem;text-transform:none}
.article-back{font-family:Manrope,sans-serif;font-size:.7rem;font-weight:500;letter-spacing:.02rem}
/* Long-form article: wider panel with a sticky contents rail, so the reader can
   see the shape of the piece and jump rather than scroll blindly. The text column
   stays at a readable measure; only the rail uses the extra width. */
#main article.article-detail.article-long{width:76rem;max-width:calc(100vw - 4rem);padding:3.5rem 2.5rem 1.5rem}
#main article.article-detail.article-long h1{margin-bottom:2.5rem}
.article-layout{display:grid;grid-template-columns:16rem minmax(0,44rem);gap:3.5rem;align-items:start}
.article-column{min-width:0}
.article-toc{position:sticky;top:2rem}
.article-toc-title{font-family:Manrope,sans-serif;font-size:.66rem;font-weight:500;letter-spacing:.1rem;line-height:1.5;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:1rem}
#main article.article-detail .article-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
#main article.article-detail .article-toc li{counter-increment:toc;position:relative;margin-bottom:.7rem;padding-left:1.5rem}
#main article.article-detail .article-toc li:before{content:counter(toc);position:absolute;left:0;top:0;font-size:.62rem;font-weight:500;line-height:1.6;color:rgba(255,255,255,.35)}
#main article.article-detail .article-toc a{display:block;border-bottom:0;font-family:Manrope,sans-serif;font-size:.7rem;font-weight:300;line-height:1.45;letter-spacing:.015rem;color:rgba(255,255,255,.6);transition:color .2s ease}
#main article.article-detail .article-toc a:hover{color:#fff}
#main article.article-detail .article-column>h2:first-of-type{margin-top:0}
@media screen and (max-width:1280px){
	#main article.article-detail.article-long{width:56rem}
	.article-layout{grid-template-columns:1fr;gap:2rem}
	.article-toc{position:static;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.15)}
}
@media screen and (max-width:736px){
	#main article.article-detail.article-long{max-width:calc(100vw - 2rem);padding:3rem 1.5rem 1rem}
}
.article-card__media{align-self:stretch;margin:-1.5rem -1.5rem 1.25rem;aspect-ratio:16/9;overflow:hidden;border-radius:3px 3px 0 0;background:rgba(255,255,255,.04)}
.article-card__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.article-card:hover .article-card__media img{transform:scale(1.04)}
@media screen and (max-width:980px){#main article.article-wide{width:60rem}.articles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media screen and (max-width:736px){#main article.article-wide{max-width:calc(100vw - 2rem);padding:3rem 1.5rem 1rem}.articles-grid{grid-template-columns:1fr;gap:1rem}.article-card{min-height:12rem}.articles-academic{margin-top:2rem;padding-top:1.5rem}.article-card--wide{flex-direction:column;align-items:flex-start;gap:1.25rem;padding:1.5rem}.article-card__thumb{width:5rem;height:5rem;transform:rotate(-4deg)}.article-card--wide .article-card__link{margin-top:.5rem}#main article.article-detail h1{font-size:1.55rem}#main article.article-detail li,#main article.article-detail p{font-size:.82rem;line-height:1.7;letter-spacing:.015rem}#main article.article-detail h2{font-size:.82rem;letter-spacing:.015rem}#main article.article-detail .article-actions .button{font-size:.66rem;letter-spacing:.015rem}}

/* ---------------------------------------------------------------------------
   Site-wide overrides for the Dimension theme.

   These belong here rather than in main.css: main.css is the vendor stylesheet
   and is minified, so keeping local changes separate makes it obvious later
   which rules are ours. articles.css loads AFTER main.css in both index.html
   files, so equal-specificity rules below win on source order.
   --------------------------------------------------------------------------- */

/* CLS fix. The theme starts #header .content .inner at max-height:0 and grows it
   when is-preload is removed. That resizes #header, #wrapper re-centres, and
   everything below moves: Lighthouse attributed the entire 0.128 layout shift
   score to this one element. Reserving the header's final height means the
   intro animation expands inside space that was already allocated.

   MEASURE BEFORE TRUSTING THESE NUMBERS. With the page fully loaded, run
   document.getElementById('header').offsetHeight in the console, once at desktop
   width and once with mobile emulation on, divide by 16, round up. Too small and
   the shift remains; too large and a gap opens under the header. */
#header{min-height:24rem}
@media screen and (max-width:736px){#header{min-height:20rem}}