@import url("main.css");

.article-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px clamp(24px, 5vw, 84px); border-bottom: 1px solid var(--line); }
.article-header .brand { font-size: 18px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 14px; }
.back-link svg { width: 17px; transition: transform .2s ease; }
.back-link:hover svg { transform: translateX(-4px); }
.article-hero { padding: clamp(65px, 10vw, 135px) 24px clamp(55px, 8vw, 105px); background: var(--paper-deep); }
.article-hero-inner, .article-body, .category-main { width: min(800px, 100%); margin: 0 auto; }
.article-date { margin: 0 0 14px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.article-hero h1 { font-size: clamp(31px, 4.7vw, 54px); }
.article-standfirst { margin: 22px 0 0; color: var(--ink-soft); font-size: 17px; line-height: 1.85; }
.article-body { padding: 64px 0 110px; color: #38423d; font-size: 16px; line-height: 2; }
.article-body h2 { margin: 45px 0 16px; font-size: 27px; }
.article-body p { margin: 0 0 22px; }
.article-placeholder { padding: 27px 30px; border-left: 3px solid var(--accent); background: #f1ede3; color: var(--ink-soft); }
.category-main { padding: 88px 0 110px; }
.category-main .section-heading { margin-bottom: 47px; }
.category-list { border-top: 1px solid var(--line); }
.category-list a { display: block; padding: 25px 0; border-bottom: 1px solid var(--line); transition: padding .22s ease, background .22s ease; }
.category-list a:hover { padding-left: 17px; background: var(--paper-deep); }
.category-list time { display: block; margin-bottom: 6px; color: var(--accent); font-size: 12px; letter-spacing: .1em; }
.category-list h2 { font-size: 21px; }
.category-list p { margin: 7px 0 0; color: var(--ink-soft); font-size: 14px; }
@media (max-width: 600px) { .article-header { padding: 18px 20px; } .article-body { padding: 48px 20px 80px; } .category-main { width: calc(100% - 40px); padding: 65px 0 80px; } .article-hero { padding-left: 20px; padding-right: 20px; } }