body.pianolia-premium.articles-page .site-header.site-navigation { position: relative; background: #faf9f6; }
body.pianolia-premium.articles-page { background: #faf9f6; color: #171717; }
.articles-page main { max-width: 1240px; margin: 0 auto; padding: 64px 6% 112px; }
.articles-intro { max-width: 760px; margin-bottom: 56px; }
.articles-intro h1 { margin: 20px 0 24px; font-size: clamp(38px, 5.5vw, 76px); font-weight: 500; line-height: 1.05; letter-spacing: -.055em; }
.articles-intro > p:last-child { max-width: 640px; color: #62615e; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.7; }
.articles-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.article-card { overflow: hidden; border: 1px solid #deddd8; border-radius: 24px; background: #fff; }
.article-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.article-card-link:focus-visible { outline: 3px solid #171717; outline-offset: -5px; border-radius: 24px; }
.article-illustration { position: relative; display: grid; place-items: center; height: 200px; overflow: hidden; background: #eae8e2; }
.article-illustration-1 { background: #242424; color: #fff; }
.article-notes { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(8px, 1.5vw, 18px); padding-bottom: 34px; }
.article-notes > span { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #17171745; border-radius: 50%; font-size: 17px; }
.article-illustration-1 .article-notes > span { border-color: #ffffff60; border-radius: 12px; }
.article-keys { position: absolute; display: flex; width: 92%; height: 75px; bottom: -15px; transform: rotate(-6deg); }
.article-keys i { position: relative; flex: 1; border: 1px solid #d0cec9; border-radius: 0 0 4px 4px; background: #fff; }
.article-keys i:not(:nth-child(7n + 3)):not(:nth-child(7n))::after { position: absolute; z-index: 1; content: ''; width: 56%; height: 56%; right: -28%; top: 0; border-radius: 0 0 3px 3px; background: #171717; }
.article-card-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 30px; }
.article-card-copy .eyebrow { color: #77746d; font-size: 10px; letter-spacing: .14em; }
.article-card-copy h2 { margin: 16px 0; font-size: clamp(24px, 2.5vw, 32px); font-weight: 500; line-height: 1.15; letter-spacing: -.035em; }
.article-card-copy > p:not(.eyebrow) { margin: 0 0 28px; color: #62615e; font-size: 15px; line-height: 1.7; }
.article-read { display: inline-flex; align-items: center; gap: 18px; margin-top: auto; border-bottom: 1px solid #b4b2ac; padding-bottom: 6px; font-size: 13px; font-weight: 600; }
.article-card-link:hover .article-read { border-color: #171717; }
@media (max-width: 640px) {
  .articles-page main { padding-top: 40px; padding-bottom: 72px; }
  .articles-intro { margin-bottom: 32px; }
  .articles-grid { grid-template-columns: 1fr; gap: 24px; }
  .article-card-copy { padding: 24px; }
  .article-illustration { height: 176px; }
}