:root{--navy:#000e35;--blue:#0043ff;--red:#ff1200;--cream:#f7f5ee;--sky:#a3d4f2;--line:rgba(0,14,53,.18);--sans:"Lato",Arial,sans-serif;--display:"Avenir Next","Avenir","Montserrat",Arial,sans-serif;--mono:"DM Mono",monospace}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.035em}
*{box-sizing:border-box}
body{background:var(--cream);color:var(--navy);font-family:var(--sans);margin:0}
.article-thumb{position:relative}.article-thumb small{background:var(--red);bottom:12px;color:#fff;font:500 .55rem var(--mono);letter-spacing:.05em;padding:7px 9px;position:absolute;right:12px;text-transform:uppercase}
.articles-header{align-items:center;background:var(--navy);color:var(--cream);display:grid;grid-template-columns:1fr auto 1fr;padding:22px 4vw}
.articles-brand img{display:block;height:31px}
.articles-header nav{display:flex;gap:26px}
.articles-header a{color:inherit;font-size:.78rem;text-decoration:none}
.back-home{justify-self:end}
.articles-hero{background:var(--sky);display:grid;gap:4vw;grid-template-columns:1.25fr .75fr;min-height:58vh;padding:clamp(110px,12vw,180px) 5vw 75px}
.kicker{font:500 .65rem var(--mono);letter-spacing:.08em;margin:0 0 22px;text-transform:uppercase}
.articles-hero .kicker{grid-column:1/-1}
.articles-hero h1{font-size:clamp(4.5rem,10vw,10rem);font-weight:500;letter-spacing:-.075em;line-height:.82;margin:0}
.articles-hero h1 em{color:var(--blue);font-style:normal}
.articles-hero>p:last-child{align-self:end;font-size:1.05rem;line-height:1.55;margin:0;max-width:38ch}
.articles-list{padding:clamp(80px,9vw,140px) 5vw}
.articles-heading h2{font-size:clamp(3rem,6vw,6rem);font-weight:500;letter-spacing:-.06em;line-height:.9;margin:0}
.article-grid{display:grid;gap:10px;grid-template-columns:repeat(3,1fr);margin-top:60px}
.article-grid article{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;min-height:390px;padding:30px}
.article-grid{grid-template-columns:repeat(2,1fr)}
.article-card{background:#fff;border:1px solid var(--line);color:inherit;display:flex;flex-direction:column;min-height:560px;overflow:hidden;text-decoration:none;transition:box-shadow .25s,transform .25s}
.article-card:hover{box-shadow:0 20px 55px rgba(0,14,53,.14);transform:translateY(-4px)}
.article-thumb{aspect-ratio:16/8;overflow:hidden}
.article-thumb img{display:block;height:100%;object-fit:cover;transition:transform .45s ease;width:100%}
.article-card:hover .article-thumb img{transform:scale(1.025)}
.article-card-copy{display:flex;flex:1;flex-direction:column;padding:28px 30px 30px}
.article-card h3{max-width:15ch}
.article-grid span{font:.58rem var(--mono);text-transform:uppercase}
.article-grid h3{font-size:clamp(1.6rem,2.5vw,2.6rem);font-weight:500;letter-spacing:-.04em;line-height:1.02;margin:42px 0 20px}
.article-grid p{line-height:1.55;margin:0}
.article-grid b{color:var(--red);font:.6rem var(--mono);margin-top:auto;text-transform:uppercase}
footer{background:var(--navy);color:var(--cream);display:flex;font-size:.72rem;justify-content:space-between;padding:30px 5vw}
footer a{color:inherit;text-decoration:none}
@media(max-width:760px){.articles-header{grid-template-columns:1fr auto}
.articles-header nav{display:none}
.articles-hero{display:block;min-height:0;padding:90px 6vw 65px}
.articles-hero>p:last-child{margin-top:45px}
.article-grid{grid-template-columns:1fr}
.article-grid article{min-height:320px}
}
