/* =========================================================
   IMPACTONE
   Main Stylesheet
   V1.1
========================================================= */


/* =========================================================
   01. DESIGN SYSTEM
========================================================= */

:root {

  --navy: #071b35;
  --navy-2: #0c2b50;
  --navy-3: #11385e;

  --gold: #c6a15b;
  --gold-soft: #dec794;

  --paper: #f5f2eb;
  --soft: #f5f7f9;

  --white: #ffffff;

  --ink: #111827;
  --text: #334155;
  --muted: #667085;

  --line: #dedede;
  --line-dark: #31506f;

  --max-width: 1180px;

}


/* =========================================================
   02. RESET
========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {

  margin: 0;

  font-family:
    Arial,
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;

  color: var(--ink);

  line-height: 1.65;

  background: var(--white);

  -webkit-font-smoothing: antialiased;

}


a {

  color: inherit;

  text-decoration: none;

}


button,
input {

  font: inherit;

}


button {

  cursor: pointer;

}


img {

  max-width: 100%;

  display: block;

}


/* =========================================================
   03. LAYOUT
========================================================= */

.wrap {

  width: min(
    var(--max-width),
    calc(100% - 40px)
  );

  margin-left: auto;
  margin-right: auto;

}


.narrow {

  width: min(
    820px,
    calc(100% - 40px)
  );

  margin-left: auto;
  margin-right: auto;

}


.center {

  text-align: center;

}


/* =========================================================
   04. TYPOGRAPHY
========================================================= */

h1,
h2,
h3 {

  margin-top: 0;
  margin-bottom: 18px;

  font-family:
    Georgia,
    "Songti SC",
    "SimSun",
    serif;

  color: var(--navy);

  line-height: 1.18;

}


h1 {

  font-size: 68px;

  letter-spacing: -0.025em;

}


h2 {

  font-size: 46px;

}


h3 {

  font-size: 25px;

}


p {

  margin-top: 0;

}


.lead {

  max-width: 760px;

  font-size: 19px;

  color: #586577;

}


.eyebrow {

  margin-bottom: 12px;

  color: var(--gold);

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.17em;

}


.tag {

  display: inline-block;

  margin-bottom: 10px;

  color: var(--gold);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.11em;

}


.text-link {

  color: var(--navy);

  font-weight: 800;

}


.text-link:hover {

  color: var(--gold);

}


/* =========================================================
   05. HEADER
========================================================= */

.site-header {

  position: sticky;

  top: 0;

  z-index: 100;

  background: rgba(
    255,
    255,
    255,
    0.97
  );

  border-bottom: 1px solid #eeeeee;

  backdrop-filter: blur(10px);

}


.nav {

  min-height: 72px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

}


.logo {

  flex-shrink: 0;

  color: var(--navy);

  font-family: Georgia, serif;

  font-size: 27px;

  font-weight: 700;

  letter-spacing: 0.08em;

}


.desktop-nav {

  display: flex;

  align-items: center;

  gap: 23px;

  margin-left: auto;

  font-size: 14px;

}


.desktop-nav a {

  padding: 25px 0;

  color: #293241;

  transition: color 0.2s ease;

}


.desktop-nav a:hover {

  color: var(--gold);

}


.desktop-nav a.active {

  color: var(--navy);

  font-weight: 700;

  border-bottom: 2px solid var(--gold);

}


.nav-actions {

  display: flex;

  align-items: center;

  gap: 12px;

  flex-shrink: 0;

}


.login-link {

  color: var(--navy);

  font-size: 14px;

  font-weight: 700;

}


.login-link:hover {

  color: var(--gold);

}


.menu-btn {

  display: none;

  padding: 6px;

  border: 0;

  background: transparent;

  color: var(--navy);

  font-size: 24px;

}


/* =========================================================
   06. MOBILE MENU
========================================================= */

.mobile-menu {

  display: none;

  padding:
    10px
    20px
    22px;

  border-top: 1px solid #eeeeee;

  background: var(--white);

}


.mobile-menu.open {

  display: grid;

  gap: 4px;

}


.mobile-menu a {

  padding: 10px 0;

  color: var(--navy);

  font-size: 15px;

  font-weight: 600;

  border-bottom: 1px solid #f0f0f0;

}


.mobile-menu a:hover {

  color: var(--gold);

}


/* =========================================================
   07. BUTTONS
========================================================= */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 11px 17px;

  border: 1px solid var(--navy);

  background: var(--white);

  color: var(--navy);

  font-weight: 700;

  line-height: 1.3;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;

}


.btn.small {

  padding: 9px 13px;

  font-size: 13px;

}


.btn.gold {

  background: var(--gold);

  border-color: var(--gold);

  color: #09182a;

}


.btn.gold:hover {

  background: #d2b36f;

  border-color: #d2b36f;

}


.btn.outline {

  background: transparent;

  color: var(--navy);

}


.btn.outline:hover {

  background: var(--navy);

  color: var(--white);

}


/* =========================================================
   08. SECTIONS
========================================================= */

.hero,
.section {

  padding: 88px 0;

}


.paper {

  background: var(--paper);

}


.soft {

  background: var(--soft);

}


.dark {

  background: var(--navy);

  color: var(--white);

}


.dark h1,
.dark h2,
.dark h3 {

  color: var(--white);

}


/* =========================================================
   09. HERO
========================================================= */

.hero-grid {

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 60px;

  align-items: center;

}


.hero-visual {

  min-height: 460px;

  padding: 35px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  color: var(--white);

  background:
    linear-gradient(
      135deg,
      var(--navy),
      #19466f
    );

}


.hero-visual span {

  margin-bottom: 12px;

  color: var(--gold-soft);

  font-size: 12px;

  letter-spacing: 0.15em;

}


.hero-visual strong {

  font-family: Georgia, serif;

  font-size: 42px;

  line-height: 1.12;

}
section.hero h1 {
  font-size: 46px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
}


/* =========================================================
   10. WHY IT MATTERS
========================================================= */

.why-box {

  margin: 26px 0;

  padding:
    8px
    0
    8px
    17px;

  border-left: 3px solid var(--gold);

}


.why-box span {

  color: var(--gold);

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 0.12em;

}


.why-box p {

  margin:
    7px
    0
    0;

}


/* =========================================================
   11. DAILY BRIEF
========================================================= */

.section-title {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 30px;

  margin-bottom: 35px;

}


.date-chip {

  padding: 9px 13px;

  border: 1px solid #d5d2ca;

  color: #55606e;

  font-weight: 700;

}


.daily-grid {

  display: grid;

  grid-template-columns:
    minmax(0, 1.4fr)
    minmax(280px, 0.6fr);

  gap: 45px;

  align-items: start;

}


.brief {

  display: grid;

  grid-template-columns:
    55px
    minmax(0, 1fr);

  gap: 18px;

  padding: 24px 0;

  border-top: 1px solid #d8d5ce;

}


.number {

  color: var(--gold);

  font-family: Georgia, serif;

  font-size: 28px;

  font-weight: 700;

}


.brief p,
.brief small {

  color: #586577;

}


/* =========================================================
   12. NEWSLETTER
========================================================= */

.subscribe-card {

  padding: 30px;

  background: var(--navy);

  color: var(--white);

}


.subscribe-card h3 {

  color: var(--white);

}


.subscribe-card p,
.subscribe-card small {

  color: #cbd5e1;

}


.newsletter-form {

  display: grid;

  gap: 10px;

  margin: 20px 0;

}


.newsletter-form.wide {

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  max-width: 700px;

  margin:
    24px
    auto
    0;

}


.newsletter-form input {

  width: 100%;

  min-width: 0;

  padding: 14px 15px;

  border: 1px solid #ccd2d9;

  background: var(--white);

  color: var(--ink);

  font-size: 16px;

  outline: none;

}


.newsletter-form input:focus {

  border-color: var(--gold);

}


.form-message {

  color: var(--gold-soft);

  font-weight: 700;

}


/* =========================================================
   13. LATEST
========================================================= */

.latest-grid {

  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, 0.95fr);

  gap: 40px;

}


.feature-card,
.content-card {

  overflow: hidden;

  border: 1px solid var(--line);

  background: var(--white);

}


.image-placeholder {

  height: 280px;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    linear-gradient(
      135deg,
      #d8dee7,
      #f4f5f6
    );

  color: var(--navy);

  font-weight: 800;

  letter-spacing: 0.12em;

}


.image-placeholder.small {

  height: 180px;

}


.card-body {

  padding: 24px;

}


.latest-list {

  display: grid;

}


.latest-list a {

  display: grid;

  grid-template-columns:
    105px
    minmax(0, 1fr);

  gap:
    7px
    18px;

  padding: 17px 0;

  border-top: 1px solid var(--line);

}


.latest-list a:hover strong {

  color: var(--gold);

}


.latest-list span {

  color: var(--muted);

  font-size: 12px;

}


.latest-list strong {

  color: var(--navy);

  font-size: 18px;

}


.latest-list em {

  grid-column: 2;

  color: #6b7280;

  font-size: 14px;

  font-style: normal;

}


/* =========================================================
   14. CONTENT CARDS
========================================================= */

.cards.three {

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 25px;

}


/* =========================================================
   15. PEOPLE
========================================================= */

.people-grid {

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 25px;

  margin-bottom: 28px;

}


.people-grid.large {

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

}


.person-card {

  padding-top: 18px;

  border-top: 2px solid var(--navy);

}


.portrait {

  height: 330px;

  margin-bottom: 18px;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    linear-gradient(
      135deg,
      #d8dee7,
      #f4f5f6
    );

  color: #8793a5;

  font-family: Georgia, serif;

  font-size: 60px;

  font-weight: 700;

}


.person-card p {

  color: #64748b;

}


.person-card blockquote {

  margin-left: 0;

  padding-left: 14px;

  border-left: 2px solid var(--gold);

  color: #334155;

  font-family:
    Georgia,
    "Songti SC",
    serif;

}


/* =========================================================
   16. VIDEO
========================================================= */

.video-grid article {

  padding: 18px;

  border: 1px solid var(--line-dark);

}


.video-grid span {

  color: var(--gold-soft);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.12em;

}


.video-box {

  height: 180px;

  margin-bottom: 18px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--navy-3);

  color: var(--gold-soft);

  font-size: 40px;

}


/* =========================================================
   17. EVENTS
========================================================= */

.event-grid {

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 60px;

  align-items: center;

}


.event-card {

  padding: 32px;

  border: 1px solid var(--line);

}


.event-card small {

  color: var(--gold);

  font-weight: 800;

  letter-spacing: 0.08em;

}


/* =========================================================
   18. FINAL CTA
========================================================= */

.final-cta {

  background:
    linear-gradient(
      180deg,
      #081d38,
      #051322
    );

  color: var(--white);

  text-align: center;

}


.final-cta h2 {

  color: var(--white);

  font-size: 56px;

}


.final-cta p {

  max-width: 700px;

  margin:
    0
    auto
    30px;

  color: #cbd5e1;

}


/* =========================================================
   19. FOOTER
========================================================= */

footer {

  padding:
    55px
    0
    20px;

  background: #040c16;

  color: #bcc5d0;

}


.footer-grid {

  display: grid;

  grid-template-columns:
    2fr
    repeat(
      3,
      1fr
    );

  gap: 40px;

}


.footer-grid b {

  color: var(--white);

}


.footer-grid a {

  display: block;

  margin: 8px 0;

}


.footer-grid a:hover {

  color: var(--gold-soft);

}


.light {

  color: var(--white);

}


.copyright {

  margin-top: 35px;

  padding-top: 18px;

  border-top: 1px solid #1f2937;

  font-size: 13px;

}


/* =========================================================
   20. DAILY PAGE
========================================================= */

.issue-meta {

  margin-top: 25px;

  color: var(--gold);

  font-weight: 800;

  letter-spacing: 0.08em;

}


.subhead {

  padding-bottom: 14px;

  border-bottom: 1px solid var(--line);

  font-size: 34px;

}


.spaced {

  margin-top: 65px;

}


.daily-detail {

  padding: 30px 0;

  border-bottom: 1px solid var(--line);

}


.daily-detail h4 {

  margin-bottom: 8px;

  color: #475569;

}


.scan-list {

  display: grid;

}


.scan-list div {

  display: grid;

  grid-template-columns:
    145px
    minmax(0, 1fr);

  gap: 20px;

  padding: 14px 0;

  border-bottom: 1px solid var(--line);

}


.archive-list a {

  display: grid;

  grid-template-columns:
    110px
    minmax(0, 1fr);

  padding: 15px 0;

  border-bottom: 1px solid var(--line);

}


.archive-list a:hover {

  color: var(--gold);

}


/* =========================================================
   21. ARTICLE PAGE
========================================================= */

.article-page {

  padding: 90px 0;

}


.article-container {

  max-width: 860px;

}


.article-page h1 {

  font-size: 58px;

}


.article-deck {

  color: #64748b;

  font-size: 22px;

}


.article-meta {

  margin: 24px 0;

  color: #7c8796;

}


.article-cover {

  height: 420px;

  margin-bottom: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    linear-gradient(
      135deg,
      var(--navy),
      #204b76
    );

  color: var(--white);

  font-family: Georgia, serif;

  font-size: 56px;

  font-weight: 700;

  letter-spacing: 0.12em;

}


.article-body {

  color: #283548;

  font-family:
    Georgia,
    "Songti SC",
    serif;

  font-size: 20px;

  line-height: 1.9;

}


.article-body p {

  margin-bottom: 24px;

}


.article-body h2 {

  margin-top: 44px;

  font-size: 34px;

}


.article-body blockquote {

  margin: 36px 0;

  padding:
    12px
    0
    12px
    24px;

  border-left: 4px solid var(--gold);

  color: var(--navy);

  font-size: 26px;

}


/* =========================================================
   22. PEOPLE PAGE
========================================================= */

.people-page {

  padding-top: 100px;

}


/* =========================================================
   23. LOGIN / REGISTER
========================================================= */

.account-page {

  min-height:
    calc(
      100vh - 72px
    );

  padding:
    90px
    20px;

  background: var(--soft);

}


.account-card {

  width: 100%;

  max-width: 520px;

  margin:
    0
    auto;

  padding: 48px;

  background: var(--white);

  border: 1px solid var(--line);

}


.account-card h1 {

  margin-bottom: 15px;

  font-size: 48px;

}


.account-intro {

  margin-bottom: 35px;

  color: var(--muted);

}


.account-form {

  display: grid;

  gap: 12px;

}


.account-form label {

  margin-top: 8px;

  color: var(--navy);

  font-size: 14px;

  font-weight: 700;

}


.account-form label span {

  color: var(--muted);

  font-weight: 400;

}


.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="password"] {

  width: 100%;

  padding: 14px 15px;

  border: 1px solid #ccd2d9;

  background: var(--white);

  color: var(--ink);

  font-size: 16px;

  outline: none;

}


.account-form input:focus {

  border-color: var(--gold);

}


.account-button {

  width: 100%;

  margin-top: 15px;

  padding: 14px;

  font-size: 15px;

}


.checkbox-row {

  display: flex;

  align-items: center;

  gap: 10px;

  margin: 12px 0;

  cursor: pointer;

}


.checkbox-row input {

  width: 17px;

  height: 17px;

}


.account-switch {

  margin-top: 30px;

  text-align: center;

}


.account-switch a {

  color: #92702f;

  font-weight: 800;

}


.account-switch a:hover {

  color: var(--gold);

}


.account-note {

  margin-top: 25px;

  padding-top: 20px;

  border-top: 1px solid var(--line);

  color: var(--muted);

  font-size: 13px;

  text-align: center;

}


.account-message {

  margin-top: 18px;

  color: #92702f;

  font-weight: 700;

}


/* =========================================================
   24. TABLET
========================================================= */

@media (max-width: 1000px) {

  .desktop-nav {

    gap: 15px;

  }


  .desktop-nav a {

    font-size: 13px;

  }


  .nav-actions {

    gap: 8px;

  }

}


/* =========================================================
   25. MOBILE
========================================================= */

@media (max-width: 850px) {

  .desktop-nav {

    display: none;

  }


  .menu-btn {

    display: block;

  }


  /*
    手机顶部只保留：
    IMPACTONE + 登录 + 菜单

    “免费注册”放入手机菜单，
    避免顶部过挤。
  */

  .nav-actions .btn {

    display: none;

  }


  .login-link {

    font-size: 13px;

  }


  .hero-grid,
  .daily-grid,
  .latest-grid,
  .event-grid,
  .cards.three,
  .people-grid,
  .people-grid.large,
  .footer-grid {

    grid-template-columns: 1fr;

  }


  h1 {

    font-size: 46px;

  }


  h2 {

    font-size: 36px;

  }


  .hero-visual {

    min-height: 300px;

  }


  .section-title {

    align-items: flex-start;

    flex-direction: column;

    gap: 10px;

  }


  .hero,
  .section {

    padding: 60px 0;

  }


  .newsletter-form.wide {

    grid-template-columns: 1fr;

  }


  .latest-list a {

    grid-template-columns:
      90px
      minmax(0, 1fr);

  }


  .article-page h1 {

    font-size: 42px;

  }


  .article-cover {

    height: 300px;

    font-size: 38px;

  }


  .final-cta h2 {

    font-size: 42px;

  }

}


/* =========================================================
   26. SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

  .wrap {

    width:
      calc(
        100% - 28px
      );

  }


  .narrow {

    width:
      calc(
        100% - 28px
      );

  }


  .nav {

    min-height: 64px;

  }


  .logo {

    font-size: 22px;

  }


  .hero,
  .section {

    padding: 52px 0;

  }


  h1 {

    font-size: 40px;

  }


  h2 {

    font-size: 32px;

  }


  h3 {

    font-size: 22px;

  }


  .lead {

    font-size: 17px;

  }


  .brief {

    grid-template-columns:
      40px
      minmax(0, 1fr);

  }


  .latest-list a {

    grid-template-columns: 1fr;

    gap: 5px;

  }


  .latest-list em {

    grid-column: 1;

  }


  .scan-list div {

    grid-template-columns: 1fr;

    gap: 4px;

  }


  .archive-list a {

    grid-template-columns:
      85px
      minmax(0, 1fr);

  }


  .portrait {

    height: 280px;

  }


  .article-page {

    padding: 55px 0;

  }


  .article-page h1 {

    font-size: 38px;

  }


  .article-body {

    font-size: 18px;

  }


  .article-body blockquote {

    font-size: 22px;

  }


  .final-cta h2 {

    font-size: 36px;

  }


  .account-page {

    padding:
      45px
      14px;

  }


  .account-card {

    padding:
      30px
      22px;

  }


  .account-card h1 {

    font-size: 38px;

  }

}