* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #f7f6f2;
  color: #0b1730;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
a { color: inherit; text-decoration: none; }
.page {
  width: min(100%, 920px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(11, 23, 48, 0.14);
}
.brand img { display: block; width: 220px; height: auto; }
.header nav {
  display: flex;
  gap: 22px;
  color: #596273;
  font-size: 14px;
  letter-spacing: 0.08em;
}
.header nav a:hover { color: #0b1730; }
.hero { margin: 78px 0 42px; }
.eyebrow {
  margin-bottom: 26px;
  color: #6d7482;
  font-size: 13px;
  letter-spacing: 0.20em;
}
.hero h1, .archive-head h1 {
  margin: 0;
  color: #0b1730;
  font-size: clamp(46px, 8vw, 74px);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.055em;
}
.hero p, .archive-head p {
  max-width: 720px;
  margin: 30px 0 0;
  color: #394257;
  font-size: 19px;
  line-height: 1.9;
}
.principles {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0 0 72px;
  padding: 14px 0;
  border-top: 1px solid rgba(11, 23, 48, 0.10);
  border-bottom: 1px solid rgba(11, 23, 48, 0.10);
  color: #6d7482;
  font-size: 13px;
  letter-spacing: 0.08em;
}
.principles span { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.principles em { color: #9a9a93; font-style: normal; font-size: 11px; letter-spacing: 0.14em; }
.home-categories { margin-bottom: 74px; }
.section-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 26px;
  color: #6d7482;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
}
.section-label a {
  color: #596273;
  font-size: 14px;
  letter-spacing: 0.08em;
}
.category-block {
  padding: 26px 0;
  border-top: 1px solid rgba(11, 23, 48, 0.16);
}
.category-block:last-child { border-bottom: 1px solid rgba(11, 23, 48, 0.16); }
.category-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.category-title h2 {
  margin: 0;
  color: #6d7482;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.22em;
}
.category-title em {
  color: #a19b91;
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}
.article-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 22px;
  padding: 17px 0;
  border-top: 1px solid rgba(11, 23, 48, 0.09);
  color: #12203a;
}
.article-row:hover { color: #000814; }
.article-row span {
  font-size: 20px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.article-row time {
  flex: 0 0 auto;
  color: #8a8f99;
  font-size: 13px;
  white-space: nowrap;
}
.article-empty {
  padding: 16px 0 6px;
  border-top: 1px solid rgba(11, 23, 48, 0.09);
  color: #aaa59d;
  font-size: 13px;
  letter-spacing: 0.10em;
}
.note {
  max-width: 720px;
  margin-bottom: 74px;
  padding-left: 24px;
  border-left: 1px solid rgba(11, 23, 48, 0.22);
}
.note h2 {
  margin: 0 0 22px;
  color: #6d7482;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
}
.note p {
  margin: 0;
  color: #394257;
  font-size: 16px;
  line-height: 1.9;
}
.contact {
  margin-top: 18px !important;
  color: #596273 !important;
  font-size: 15px !important;
  letter-spacing: 0.03em;
}
.contact a { border-bottom: 1px solid rgba(11, 23, 48, 0.28); }
.contact a:hover { color: #0b1730; border-bottom-color: #0b1730; }
footer {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid rgba(11, 23, 48, 0.14);
  color: #6d7482;
  font-size: 12px;
  line-height: 1.8;
}
/* Archive page */
.archive-head { margin: 78px 0 64px; }
.archive-head h1 { font-size: clamp(38px, 7vw, 64px); }
.archive-category { margin-bottom: 58px; }
.archive-category .category-block { border-bottom: 1px solid rgba(11, 23, 48, 0.16); }
/* Article pages */
.post {
  max-width: 780px;
  margin: 72px 0 96px;
}
.post-meta {
  margin-bottom: 22px;
  color: #6d7482;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.14em;
}
.post h1 {
  max-width: 760px;
  margin: 0 0 42px;
  color: #0b1730;
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.16;
  font-weight: 400;
  letter-spacing: 0;
}
.post .subtitle {
  margin: -24px 0 42px;
  color: #6d7482;
  font-size: 22px;
  line-height: 1.7;
}
.post h2 {
  margin: 66px 0 22px;
  padding-top: 28px;
  border-top: 1px solid rgba(11, 23, 48, 0.14);
  color: #0b1730;
  font-size: clamp(23px, 4vw, 29px);
  line-height: 1.42;
  font-weight: 400;
}
.post h3 {
  max-width: 740px;
  margin: 34px 0 14px;
  color: #16223b;
  font-size: 20px;
  line-height: 1.55;
  font-weight: 500;
}
.post p {
  max-width: 740px;
  margin: 0 0 22px;
  color: #2f384d;
  font-size: 18px;
  line-height: 2;
}
.post ul,
.post ol {
  max-width: 700px;
  margin: 0 0 26px 22px;
  padding: 0;
  color: #2f384d;
  font-size: 18px;
  line-height: 1.95;
}
.post li {
  margin: 0 0 8px;
  padding-left: 4px;
}
.post > p:first-of-type {
  margin-bottom: 28px;
  color: #16223b;
  font-size: 21px;
  line-height: 1.9;
}
.post .leadline {
  margin-top: 34px;
  color: #16223b;
}
.post .question {
  margin-bottom: 12px;
  color: #394257;
}
.post blockquote {
  margin: 42px 0;
  padding-left: 22px;
  border-left: 1px solid rgba(11, 23, 48, 0.28);
  color: #596273;
  font-size: 20px;
  line-height: 1.9;
}
.backlink {
  margin-top: 58px !important;
  color: #596273 !important;
  font-size: 15px !important;
}
.backlink a { border-bottom: 1px solid rgba(11, 23, 48, 0.24); }
.backlink a:hover { color: #0b1730; border-bottom-color: #0b1730; }
@media (max-width: 640px) {
  .page { padding-top: 28px; }
  .header { display: block; }
  .brand img { width: 205px; }
  .header nav { margin-top: 22px; flex-wrap: wrap; }
  .hero { margin: 70px 0 38px; }
  .hero p, .archive-head p { font-size: 17px; }
  .principles { gap: 14px; margin-bottom: 62px; }
  .category-title { display: block; }
  .category-title em { display: block; margin-top: 6px; }
  .article-row { display: block; }
  .article-row time { display: block; margin-top: 7px; }
  .article-empty { padding-left: 0; }
  .archive-head { margin: 68px 0 54px; }
  .post { margin: 58px 0 78px; }
  .post-meta { margin-bottom: 18px; font-size: 12px; }
  .post h1 { margin-bottom: 34px; }
  .post .subtitle { margin: -18px 0 34px; font-size: 18px; }
  .post h2 { margin-top: 52px; padding-top: 24px; }
  .post h3 { margin-top: 28px; font-size: 18px; }
  .post p { font-size: 17px; line-height: 1.95; }
  .post ul, .post ol { margin-left: 20px; font-size: 17px; line-height: 1.9; }
  .post > p:first-of-type { font-size: 19px; line-height: 1.85; }
}


.category-more {
  display: inline-block;
  margin-top: 14px;
  color: #596273;
  font-size: 13px;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(11, 23, 48, 0.22);
}

.category-more:hover {
  color: #0b1730;
  border-bottom-color: #0b1730;
}

.archive-note {
  margin: -34px 0 54px;
  color: #7a8190;
  font-size: 14px;
  letter-spacing: 0.06em;
}

.category-anchor {
  scroll-margin-top: 32px;
}