html, body { max-width: 100%; overflow-x: hidden; }
.brand { text-decoration: none; }
.brand { align-items: center; }
.nav-dropdown { display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.nav-dropdown span { display: inline-block; line-height: 1; margin-left: 0; transform: translateY(-1px); }
.main-nav a, .nav-dropdown, .logout { line-height: 1.2; }
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 24px; text-align: center !important; }
.button span { position: static; float: none; margin: 0; transform: none; }
.article-body { max-width: 980px; margin: 0 auto; padding: 92px 7vw 120px; }
.article-header { max-width: 690px; margin: 0 auto 62px; text-align: center; }
.article-header h2 { font: 500 clamp(38px, 5vw, 66px)/1 var(--serif); letter-spacing: -.06em; margin: 16px 0 20px; }
.article-dek { color: #657268; font: 20px/1.5 var(--serif); }
.article-byline { display: flex; justify-content: center; gap: 26px; margin-top: 28px; color: #879188; font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.article-hero { margin: 0 0 90px; }
.article-hero img { display: block; width: 100%; max-height: 540px; object-fit: cover; }
.article-hero figcaption { margin-top: 10px; color: #879188; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.chapter { display: grid; grid-template-columns: 52px 1fr; gap: 22px; margin: 0 auto 82px; max-width: 700px; }
.chapter-index { color: var(--orange); font: 12px var(--mono); padding-top: 4px; }
.chapter h3 { font: 500 34px/1.05 var(--serif); letter-spacing: -.04em; margin: 10px 0 18px; }
.chapter p { max-width: 610px; color: #657268; font-size: 16px; line-height: 1.75; }
.chapter img { grid-column: 1 / -1; width: 100%; height: 330px; object-fit: cover; margin-top: 20px; }
.article-body blockquote { margin: 30px auto 90px; padding: 60px 6vw; background: var(--orange); text-align: center; font: italic 500 clamp(28px, 4vw, 48px)/1.1 var(--serif); letter-spacing: -.04em; }
.article-body blockquote cite { display: block; margin-top: 24px; font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; font-style: normal; }
.article-end { border-top: 1px solid var(--line); padding-top: 22px; display: flex; justify-content: space-between; align-items: center; color: #879188; font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
@media(max-width:800px){.article-body{padding:65px 9vw 80px}.article-byline{gap:10px;flex-wrap:wrap}.article-hero{margin-bottom:65px}.chapter{grid-template-columns:30px 1fr;margin-bottom:62px}.chapter h3{font-size:29px}.chapter p{font-size:15px}.chapter img{height:230px}.article-end{display:block}.article-end .button{margin-top:20px;width:100%}}
.logo-symbol { width: 85px; height: 85px; color: currentColor; flex: 0 0 auto; transform: none; }
.site-header { display: grid; grid-template-columns: minmax(165px, 1fr) auto minmax(165px, 1fr); gap: 32px; }
.site-header .brand { align-items: center; height: 78px; }
.main-nav { margin: 0; justify-content: center; }
.header-actions { min-width: 165px; justify-content: flex-end; white-space: nowrap; }
.member-chip, .logout { display: inline-flex; align-items: center; line-height: 1; }
.logout { gap: 8px; }
@media (max-width: 800px) {
  .site-header { display: flex; gap: 12px; }
  .site-header .brand { height: 70px; }
  .main-nav { margin-left: auto; justify-content: flex-end; }
  .header-actions { min-width: auto; }
}