/* web: editorial blue, sharp corners, zebra table first */
html { scroll-behavior: auto; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.68;
  color: #0B1F3A;
  background: #E8EEF7;
}
svg { display: block; max-width: 100%; }
a { color: #1B4B8A; text-decoration: none; }
a:hover { color: #0B1F3A; }

.edition-bar {
  background: #0B1F3A;
  color: #fff;
}
.edition-inner {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
  min-height: 72px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.press-lock {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.press-lock svg { width: 26px; height: 26px; }
.folio-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.folio-nav a {
  color: #c5d4e8;
  font-size: 12px;
  letter-spacing: 0.14em;
}
.folio-nav a:hover { color: #fff; }

.lede {
  width: min(1080px, calc(100% - 40px));
  margin: 36px auto 8px;
  background: #FFFFFF;
  padding: 32px 36px 28px;
  border-left: 6px solid #1B4B8A;
}
.lede h1 {
  font-size: 34px;
  line-height: 1.28;
  margin-bottom: 14px;
  font-weight: 750;
}
.lede p { margin-bottom: 10px; color: #24364f; max-width: 52em; }

.folio {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
  padding: 32px 0 6px;
}
.folio h2 {
  font-size: 21px;
  color: #1B4B8A;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #1B4B8A;
  font-weight: 700;
}
.folio-lead { margin-bottom: 18px; }

.inlet-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: #fff;
  border: 1px solid #c5d2e4;
}
.inlet-cell {
  padding: 22px 20px;
}
.inlet-cell + .inlet-cell { border-left: 1px solid #c5d2e4; }
.inlet-cell svg { width: 38px; height: 38px; color: #1B4B8A; }
.inlet-cell h3 { font-size: 17px; margin: 10px 0 8px; }

.stripe-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #c5d2e4;
}
.stripe-table th,
.stripe-table td {
  padding: 11px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #d5deea;
  font-size: 14px;
}
.stripe-table th {
  background: #1B4B8A;
  color: #fff;
  font-weight: 650;
}
.stripe-table tbody tr:nth-child(odd) td { background: #f4f7fb; }
.stripe-table tbody tr:nth-child(even) td { background: #ffffff; }

.prefer-grid,
.avoid-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.prefer-card,
.avoid-card {
  background: #fff;
  padding: 18px 18px 16px;
  border: 1px solid #c5d2e4;
}
.prefer-card h3,
.avoid-card h3 {
  font-size: 16px;
  margin-bottom: 8px;
}
.prefer-card { border-top: 4px solid #1B4B8A; }
.avoid-card { border-top: 4px solid #0B1F3A; }

.overlap-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.overlap-two article {
  background: #fff;
  padding: 22px;
  border: 1px solid #c5d2e4;
}
.overlap-two article + article { border-left: 0; }
.overlap-two h3 { font-size: 17px; margin-bottom: 10px; color: #1B4B8A; }

.moment-line {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: #fff;
  border: 1px solid #c5d2e4;
}
.moment-node {
  padding: 18px 16px 20px;
  position: relative;
}
.moment-node + .moment-node { border-left: 1px dashed #9aafc8; }
.moment-kicker {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #1B4B8A;
  margin-bottom: 8px;
}
.moment-node h3 { font-size: 15px; margin-bottom: 8px; }

.folio-faq { background: #fff; border: 1px solid #c5d2e4; }
.folio-faq details {
  padding: 0 18px;
  border-bottom: 1px solid #d5deea;
}
.folio-faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 13px 0;
  font-size: 15px;
}
.folio-faq summary:hover { color: #1B4B8A; }
.folio-faq p { padding-bottom: 14px; font-size: 15px; }

.colophon {
  background: #0B1F3A;
  color: #b7c6d8;
  margin-top: 48px;
  padding: 28px 0;
  font-size: 13px;
}
.colophon-inner {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
}
.colophon p { margin: 7px 0; }

@media (max-width: 880px) {
  .inlet-three, .prefer-grid, .avoid-grid, .overlap-two, .moment-line {
    grid-template-columns: 1fr;
  }
  .inlet-cell + .inlet-cell,
  .overlap-two article + article,
  .moment-node + .moment-node {
    border-left: 0;
    border-top: 1px solid #c5d2e4;
  }
  .lede h1 { font-size: 26px; }
}