


.articles-page{position:relative;isolation:isolate;overflow:hidden;min-height:760px;padding:76px 0 64px;background:var(--paper);font-family:Matter,Arial,sans-serif}
.articles-page:before{content:'';position:absolute;z-index:-1;width:1150px;height:1150px;right:-470px;top:-260px;background:url('/assets/hero-background-animated.svg') center/contain no-repeat;opacity:.7;pointer-events:none}
.articles-inner{margin:0 auto;max-width:1440px;padding:0 6%}.articles-top{display:flex;justify-content:space-between;gap:30px;align-items:center}.articles-eyebrow{font:12px 'Matter',Matter,Arial,sans-serif;letter-spacing:.04em}.article-filters{display:flex;gap:10px;flex-wrap:wrap}.article-filters button{border:1px solid transparent;border-radius:40px;padding:8px 18px;background:transparent;cursor:pointer;font:12px 'Matter',Matter,Arial,sans-serif}.article-filters button[aria-pressed=true]{border-color:#000;background:var(--yellow)}.articles-page h1{font-family:Matter,Arial,sans-serif;font-weight:700;font-size:clamp(76px,10vw,150px);letter-spacing:0;line-height:1;margin:48px 0 62px;color:#000}
.stories{display:flex;gap:46px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--blue) transparent;padding:0 0 28px;margin-right:-6vw}.story{flex:0 0 min(570px,79vw);display:grid;grid-template-columns:1fr 1.05fr;gap:24px;scroll-snap-align:start}.story[hidden]{display:none}.story>img{width:100%;height:320px;object-fit:cover;border-radius:2px}.story-copy{display:flex;flex-direction:column;padding:2px 0;min-width:0}.story-category{font:11px 'Matter',Matter,Arial,sans-serif;text-transform:uppercase}.story h2{font-size:27px;line-height:1.08;letter-spacing:-.035em;margin:20px 0 16px;font-weight:700}.story p{font-size:16px;line-height:1.3;margin:0 0 24px}.story-meta{margin-top:auto;font:10px 'Matter',Matter,Arial,sans-serif;color:#666}.story-open{margin-top:12px;padding:12px 0 0;border:0;border-top:1px solid #888;background:none;display:flex;justify-content:space-between;cursor:pointer;font:13px 'Matter',Matter,Arial,sans-serif;text-align:left}.story-open span{font:24px/16px Matter,sans-serif}.articles-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:38px}.articles-bottom p{font:12px 'Matter',Matter,Arial,sans-serif}.story-controls{display:flex;gap:12px}.story-controls button{width:52px;height:52px;border:1px solid #000;border-radius:50%;background:transparent;font:28px Matter,sans-serif;cursor:pointer}.story-controls button:hover{background:var(--yellow)}.story-controls button:disabled{opacity:.3;cursor:default}
@media(max-width:700px){.articles-page{padding:40px 0}.articles-inner{padding:0 24px}.articles-top{display:block}.article-filters{margin-top:22px;gap:3px}.article-filters button{padding:7px 10px}.articles-page h1{margin:30px 0 36px}.stories{gap:26px;margin-right:-24px}.story{flex-basis:calc(100vw - 64px);grid-template-columns:1fr;gap:20px}.story>img{height:240px}.story h2{margin:14px 0}.story-copy{min-height:250px}.articles-page:before{right:-800px}.articles-bottom{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.articles-page:before{background-image:url('/assets/hero-background.webp')}}

.articles-top{align-items:center;margin-bottom:62px}
.articles-page .articles-top h1{font-size:120px;margin:0;flex-shrink:0}
.article-filters{justify-content:flex-end}
.story h2{margin-top:0}
.story-open{margin-top:auto;padding:0;width:48px;height:48px;flex:none;display:grid;place-items:center;border:1px solid #000;border-radius:50%;transition:background-color .2s,color .2s,border-color .2s}
.story-open:hover,.story-open:focus-visible{background:var(--blue);border-color:var(--blue);color:white}
.story-open span{font-size:27px;line-height:1}
.stories{padding-right:max(6vw,48px)}
.articles-bottom{justify-content:flex-end}
@media(max-width:900px){.articles-top{align-items:flex-start;flex-direction:column;gap:26px}.article-filters{justify-content:flex-start}}
@media(max-width:700px){.articles-page .articles-top h1{font-size:clamp(64px,14vw,96px)}.articles-top{margin-bottom:36px}.article-filters{margin-top:0}.stories{padding-right:24px}}
@media(prefers-reduced-motion:reduce){.story-open{transition:none}}

.articles-top{margin-bottom:110px}
.story{flex-basis:min(481px,79vw);grid-template-columns:minmax(0,178px) minmax(0,1fr);align-items:start}
.story>img{height:213px}
.story-copy{min-height:260px}
.story-open{justify-content:center;justify-items:center;align-items:center;text-align:center}
.story-open svg{display:block}
.article-filters button[aria-pressed=true]{background:#fff;border-color:#000}
@media(max-width:700px){.articles-top{margin-bottom:64px}.story{flex-basis:calc(100vw - 64px);grid-template-columns:1fr}.story>img{width:66.6667%;height:160px}.story-copy{min-height:250px}}

.articles-page{padding-bottom:32px;display:flex;flex-direction:column}
.articles-inner{width:100%;flex:1;display:flex;flex-direction:column}
.stories{margin-top:auto;flex-shrink:0}
.story-open{display:block;width:fit-content;height:auto;min-height:24px;padding:0;border:0;border-radius:0;background:transparent;text-align:left;text-decoration:underline;text-underline-offset:4px;font:400 14px/1.4 'Matter',Matter,Arial,sans-serif}
.story-open:hover,.story-open:focus-visible{background:transparent;color:var(--blue)}
@media(max-width:700px){.articles-page{padding-bottom:24px}}

/* Headline accents replace the placeholder artwork. */
.story{display:block;flex-basis:min(390px,79vw);--accent:var(--blue)}
.story:nth-child(4n+2){--accent:var(--purple)}
.story:nth-child(4n+3){--accent:var(--coral)}
.story:nth-child(4n+4){--accent:var(--yellow)}
.story-copy{padding:2px 0 0 30px;min-height:310px}
.story h2{position:relative;text-wrap:balance}
.story h2:before{content:'';position:absolute;left:-30px;top:0;bottom:0;width:7px;background:var(--accent)}
@media(max-width:700px){.story{flex-basis:calc(100vw - 64px)}.story-copy{min-height:310px}}
