.page-news {
  --news-cover-grad: linear-gradient(135deg, rgba(255,107,26,.16), rgba(61,224,255,.08) 62%, transparent 78%);
}

/* ---------- masthead ---------- */
.page-news .stories-masthead {
  padding-top: clamp(28px, 5vw, 64px);
  padding-bottom: clamp(32px, 5vw, 72px);
  border-bottom: 1px solid var(--hair);
}
.page-news .stories-masthead .eyebrow {
  color: var(--orange);
  letter-spacing: .22em;
  font-size: 12px;
  margin: 0 0 18px;
}
.page-news .stories-masthead h1 {
  margin: 0 0 22px;
  font-family: var(--font-serif);
  font-size: clamp(34px, 7vw, 64px);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--mist);
  font-weight: 700;
}
.page-news .stories-masthead .lede {
  max-width: 62ch;
  font-size: clamp(16px, 1.9vw, 18px);
  line-height: 1.8;
  color: var(--line);
  margin: 0 0 28px;
}
.page-news .masthead-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hair);
  border-top: 1px solid var(--hair);
}
.page-news .masthead-index li { background: var(--ink); }
.page-news .masthead-index a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 14px;
  color: var(--mist);
  text-decoration: none;
  font-size: 14px;
  border-left: 2px solid transparent;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.page-news .masthead-index a:hover,
.page-news .masthead-index a:focus-visible {
  border-left-color: var(--orange);
  background: var(--ink-2);
  color: var(--orange);
}
.page-news .masthead-index .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan);
  letter-spacing: .06em;
}

/* ---------- cover story ---------- */
.page-news .cover-story {
  position: relative;
  padding-block: clamp(40px, 6vw, 88px);
}
.page-news .cover-story__grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.page-news .cover-story__visual {
  margin: 0;
  position: relative;
}
.page-news .cover-story__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  background: var(--ink-2);
}
.page-news .cover-story__visual figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--line);
}
.page-news .cover-story__text h2 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.24;
  margin: 14px 0 20px;
  color: var(--mist);
}
.page-news .cover-story__text p {
  margin: 0 0 16px;
  line-height: 1.85;
  color: var(--line);
  max-width: 58ch;
}
.page-news .cover-story__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.page-news .cover-story__strip {
  margin-top: clamp(32px, 5vw, 56px);
  display: grid;
  gap: 1px;
  background: var(--hair);
  border-block: 1px solid var(--hair);
}
.page-news .strip-item {
  background: var(--ink);
  padding: 22px 18px;
}
.page-news .strip-item__num {
  display: block;
  color: var(--orange);
  font-size: 13px;
  letter-spacing: .2em;
  margin-bottom: 10px;
}
.page-news .strip-item h3 {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--mist);
  letter-spacing: .02em;
}
.page-news .strip-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--line);
}

/* ---------- shared section head ---------- */
.page-news .section-head { margin-bottom: clamp(24px, 3.4vw, 40px); }
.page-news .section-head .eyebrow {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  margin: 0 0 12px;
}
.page-news .section-head h2 {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: clamp(25px, 3.4vw, 36px);
  line-height: 1.24;
  color: var(--mist);
}
.page-news .section-head__lede {
  margin: 0;
  max-width: 62ch;
  line-height: 1.8;
  color: var(--line);
  font-size: 15.5px;
}
.page-news .section-head--split { display: grid; gap: 18px; }

/* ---------- filter chips ---------- */
.page-news .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.page-news .chip {
  appearance: none;
  border: 1px solid var(--hair-strong);
  background: transparent;
  color: var(--line);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 0;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.page-news .chip:hover { color: var(--orange); border-color: var(--orange); }
.page-news .chip.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);
  font-weight: 600;
}
.page-news .chip:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* ---------- update log ---------- */
.page-news .log {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hair);
}
.page-news .log__item {
  border-bottom: 1px solid var(--hair);
}
.page-news .log__item[hidden] { display: none; }
.page-news .log__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 22px 16px 22px 14px;
  border-left: 2px solid transparent;
  transition: border-color .18s ease, background-color .18s ease;
}
.page-news .log__card:hover,
.page-news .log__card:focus-within {
  border-left-color: var(--orange);
  background: rgba(27, 42, 68, .55);
}
.page-news .log__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.page-news .log__num {
  font-size: 12px;
  color: var(--cyan);
  letter-spacing: .08em;
}
.page-news .log__time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--line);
  letter-spacing: .04em;
}
.page-news .tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .08em;
  padding: 3px 9px;
  color: var(--orange);
  border: 1px solid rgba(255,107,26,.45);
  background: rgba(255,107,26,.08);
}
.page-news .tag--orange {
  color: var(--orange-text);
  background: var(--orange-veil);
  border-color: transparent;
  font-weight: 600;
}
.page-news .tag--soft {
  color: var(--ink);
  background: var(--cyan-soft);
  border-color: transparent;
  margin-right: 10px;
}
.page-news .log__title {
  margin: 0 0 8px;
  font-size: clamp(16.5px, 2vw, 19px);
  line-height: 1.45;
  color: var(--mist);
  font-weight: 600;
}
.page-news .log__summary {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--line);
  max-width: 66ch;
}
.page-news .log__thumb {
  margin: 4px 0 0;
}
.page-news .log__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--ink-2);
}
.page-news .log__empty {
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--line);
}

/* ---------- guides ---------- */
.page-news .guides {
  border-top: 1px solid var(--hair);
  padding-block: clamp(40px, 6vw, 84px);
}
.page-news .guides__grid {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
}
.page-news .guides__text h2 {
  font-family: var(--font-serif);
  font-size: clamp(25px, 3.4vw, 36px);
  line-height: 1.24;
  margin: 0 0 14px;
  color: var(--mist);
}
.page-news .guides__text > p {
  margin: 0 0 26px;
  max-width: 56ch;
  line-height: 1.8;
  color: var(--line);
}
.page-news .guide-list {
  display: grid;
  gap: 1px;
  background: var(--hair);
  border-block: 1px solid var(--hair);
}
.page-news .guide {
  background: var(--ink);
  padding: 20px 16px;
  transition: background-color .18s ease;
}
.page-news .guide:hover { background: var(--ink-2); }
.page-news .guide h3 {
  margin: 0 0 10px;
  font-size: 17px;
  color: var(--mist);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.page-news .guide__no {
  color: var(--orange);
  font-size: 13px;
  letter-spacing: .14em;
}
.page-news .guide p {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--line);
}
.page-news .guide__link {
  color: var(--cyan);
  font-size: 13.5px;
  text-decoration: none;
  border-bottom: 1px solid rgba(61,224,255,.4);
  padding-bottom: 1px;
}
.page-news .guide__link:hover,
.page-news .guide__link:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
}
.page-news .guides__visual { margin: 0; }
.page-news .guides__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
  background: var(--ink-2);
  border: 1px solid var(--hair);
}
.page-news .guides__visual figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--line);
}

/* ---------- h2h features ---------- */
.page-news .h2h {
  border-top: 1px solid var(--hair);
  padding-block: clamp(40px, 6vw, 84px);
}
.page-news .h2h-grid {
  display: grid;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}
.page-news .h2h-card {
  background: var(--ink);
  padding: 24px 18px;
  position: relative;
  transition: background-color .18s ease;
}
.page-news .h2h-card:hover { background: var(--ink-3); }
.page-news .h2h-card__no {
  font-size: 12px;
  color: var(--cyan);
  letter-spacing: .16em;
  display: block;
  margin-bottom: 12px;
}
.page-news .h2h-card h3 {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--mist);
}
.page-news .h2h-card p {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--line);
}
.page-news .h2h-card__link {
  font-size: 13px;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,107,26,.4);
  padding-bottom: 1px;
}
.page-news .h2h-card__link:hover,
.page-news .h2h-card__link:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}
.page-news .h2h-card--accent {
  background: var(--news-cover-grad), var(--ink-2);
}
.page-news .h2h-card--accent h3 { color: var(--mist); }

/* ---------- proofreading ---------- */
.page-news .proof {
  border-top: 1px solid var(--hair);
  padding-block: clamp(40px, 6vw, 84px);
}
.page-news .proof__grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
}
.page-news .proof__text h2 {
  font-family: var(--font-serif);
  font-size: clamp(25px, 3.4vw, 36px);
  line-height: 1.24;
  margin: 0 0 16px;
  color: var(--mist);
}
.page-news .proof__text p {
  margin: 0 0 16px;
  line-height: 1.82;
  color: var(--line);
  max-width: 56ch;
}
.page-news .proof__text .btn { margin-top: 8px; }
.page-news .flow {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--hair-strong);
}
.page-news .flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 0 0 26px 20px;
}
.page-news .flow__step::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  width: 9px;
  height: 9px;
  background: var(--orange);
}
.page-news .flow__step:last-child { padding-bottom: 0; }
.page-news .flow__n {
  font-size: 13px;
  color: var(--cyan);
  letter-spacing: .1em;
  line-height: 1.6;
}
.page-news .flow__step h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--mist);
}
.page-news .flow__step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--line);
}

/* ---------- archive ---------- */
.page-news .archive {
  border-top: 1px solid var(--hair);
  padding-block: clamp(40px, 6vw, 84px) clamp(48px, 7vw, 96px);
}
.page-news .archive-grid {
  display: grid;
  gap: 12px;
}
.page-news .archive-fold {
  border: 1px solid var(--hair);
  background: var(--ink-2);
}
.page-news .archive-fold summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  border-left: 2px solid transparent;
  transition: border-color .16s ease, background-color .16s ease;
}
.page-news .archive-fold summary::-webkit-details-marker { display: none; }
.page-news .archive-fold summary:hover,
.page-news .archive-fold summary:focus-visible {
  border-left-color: var(--orange);
  background: var(--ink-3);
  outline: none;
}
.page-news .archive-fold__label {
  font-size: 16px;
  font-weight: 600;
  color: var(--mist);
  letter-spacing: .02em;
}
.page-news .archive-fold__hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--cyan);
}
.page-news .archive-fold__list {
  list-style: none;
  margin: 0;
  padding: 4px 18px 18px;
  border-top: 1px solid var(--hair);
}
.page-news .archive-fold__list li {
  padding: 12px 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--line);
  border-bottom: 1px solid var(--hair);
}
.page-news .archive-fold__list li:last-child { border-bottom: 0; }

.page-news .archive-cta {
  margin-top: clamp(28px, 4vw, 44px);
  padding: 24px 20px;
  border: 1px solid var(--hair-strong);
  background: linear-gradient(120deg, rgba(255,107,26,.1), transparent 58%);
}
.page-news .archive-cta p {
  margin: 0 0 18px;
  max-width: 58ch;
  line-height: 1.8;
  color: var(--line);
}
.page-news .archive-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- responsive ---------- */
@media (min-width: 640px) {
  .page-news .masthead-index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-news .cover-story__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-news .h2h-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-news .log__card {
    grid-template-columns: 1fr auto;
    align-items: start;
    padding: 24px 20px;
  }
  .page-news .log__thumb { width: 180px; }
}

@media (min-width: 900px) {
  .page-news .stories-masthead { padding-top: clamp(48px, 6vw, 84px); }
  .page-news .masthead-index { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .page-news .masthead-index a { flex-direction: column; gap: 6px; padding: 16px 14px; }
  .page-news .cover-story__grid {
    grid-template-columns: 1.15fr .85fr;
    align-items: end;
  }
  .page-news .cover-story__text { padding-bottom: 8px; }
  .page-news .section-head--split {
    grid-template-columns: 1fr .9fr;
    align-items: end;
    gap: 32px;
  }
  .page-news .guides__grid {
    grid-template-columns: 1.05fr .95fr;
    align-items: start;
  }
  .page-news .guides__visual { position: sticky; top: 24px; }
  .page-news .h2h-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-news .proof__grid {
    grid-template-columns: .95fr 1.05fr;
    gap: 56px;
    align-items: start;
  }
  .page-news .archive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
  .page-news .log__card { padding: 26px 24px; }
  .page-news .log__thumb { width: 220px; }
  .page-news .archive-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
  }
  .page-news .archive-cta p { margin: 0; }
}

@media (min-width: 1280px) {
  .page-news .log__card { grid-template-columns: 1fr 260px; }
  .page-news .log__thumb { width: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-news *,
  .page-news *::before,
  .page-news *::after {
    transition-duration: .001ms !important;
  }
}
</main>

.page-news {
  --news-cover-grad: linear-gradient(135deg, rgba(255,107,26,.16), rgba(61,224,255,.08) 62%, transparent 78%);
}

/* ---------- masthead ---------- */
.page-news .stories-masthead {
  padding-top: clamp(28px, 5vw, 64px);
  padding-bottom: clamp(32px, 5vw, 72px);
  border-bottom: 1px solid var(--hair);
}
.page-news .stories-masthead .eyebrow {
  color: var(--orange);
  letter-spacing: .22em;
  font-size: 12px;
  margin: 0 0 18px;
}
.page-news .stories-masthead h1 {
  margin: 0 0 22px;
  font-family: var(--font-serif);
  font-size: clamp(34px, 7vw, 64px);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--mist);
  font-weight: 700;
}
.page-news .stories-masthead .lede {
  max-width: 62ch;
  font-size: clamp(16px, 1.9vw, 18px);
  line-height: 1.8;
  color: var(--line);
  margin: 0 0 28px;
}
.page-news .masthead-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hair);
  border-top: 1px solid var(--hair);
}
.page-news .masthead-index li { background: var(--ink); }
.page-news .masthead-index a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 14px;
  color: var(--mist);
  text-decoration: none;
  font-size: 14px;
  border-left: 2px solid transparent;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.page-news .masthead-index a:hover,
.page-news .masthead-index a:focus-visible {
  border-left-color: var(--orange);
  background: var(--ink-2);
  color: var(--orange);
}
.page-news .masthead-index .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan);
  letter-spacing: .06em;
}

/* ---------- cover story ---------- */
.page-news .cover-story {
  position: relative;
  padding-block: clamp(40px, 6vw, 88px);
}
.page-news .cover-story__grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.page-news .cover-story__visual {
  margin: 0;
  position: relative;
}
.page-news .cover-story__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  background: var(--ink-2);
}
.page-news .cover-story__visual figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--line);
}
.page-news .cover-story__text h2 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.24;
  margin: 14px 0 20px;
  color: var(--mist);
}
.page-news .cover-story__text p {
  margin: 0 0 16px;
  line-height: 1.85;
  color: var(--line);
  max-width: 58ch;
}
.page-news .cover-story__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.page-news .cover-story__strip {
  margin-top: clamp(32px, 5vw, 56px);
  display: grid;
  gap: 1px;
  background: var(--hair);
  border-block: 1px solid var(--hair);
}
.page-news .strip-item {
  background: var(--ink);
  padding: 22px 18px;
}
.page-news .strip-item__num {
  display: block;
  color: var(--orange);
  font-size: 13px;
  letter-spacing: .2em;
  margin-bottom: 10px;
}
.page-news .strip-item h3 {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--mist);
  letter-spacing: .02em;
}
.page-news .strip-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--line);
}

/* ---------- shared section head ---------- */
.page-news .section-head { margin-bottom: clamp(24px, 3.4vw, 40px); }
.page-news .section-head .eyebrow {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  margin: 0 0 12px;
}
.page-news .section-head h2 {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: clamp(25px, 3.4vw, 36px);
  line-height: 1.24;
  color: var(--mist);
}
.page-news .section-head__lede {
  margin: 0;
  max-width: 62ch;
  line-height: 1.8;
  color: var(--line);
  font-size: 15.5px;
}
.page-news .section-head--split { display: grid; gap: 18px; }

/* ---------- filter chips ---------- */
.page-news .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.page-news .chip {
  appearance: none;
  border: 1px solid var(--hair-strong);
  background: transparent;
  color: var(--line);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 0;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.page-news .chip:hover { color: var(--orange); border-color: var(--orange); }
.page-news .chip.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);
  font-weight: 600;
}
.page-news .chip:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* ---------- update log ---------- */
.page-news .log {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hair);
}
.page-news .log__item {
  border-bottom: 1px solid var(--hair);
}
.page-news .log__item[hidden] { display: none; }
.page-news .log__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 22px 16px 22px 14px;
  border-left: 2px solid transparent;
  transition: border-color .18s ease, background-color .18s ease;
}
.page-news .log__card:hover,
.page-news .log__card:focus-within {
  border-left-color: var(--orange);
  background: rgba(27, 42, 68, .55);
}
.page-news .log__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.page-news .log__num {
  font-size: 12px;
  color: var(--cyan);
  letter-spacing: .08em;
}
.page-news .log__time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--line);
  letter-spacing: .04em;
}
.page-news .tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .08em;
  padding: 3px 9px;
  color: var(--orange);
  border: 1px solid rgba(255,107,26,.45);
  background: rgba(255,107,26,.08);
}
.page-news .tag--orange {
  color: var(--orange-text);
  background: var(--orange-veil);
  border-color: transparent;
  font-weight: 600;
}
.page-news .tag--soft {
  color: var(--ink);
  background: var(--cyan-soft);
  border-color: transparent;
  margin-right: 10px;
}
.page-news .log__title {
  margin: 0 0 8px;
  font-size: clamp(16.5px, 2vw, 19px);
  line-height: 1.45;
  color: var(--mist);
  font-weight: 600;
}
.page-news .log__summary {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--line);
  max-width: 66ch;
}
.page-news .log__thumb {
  margin: 4px 0 0;
}
.page-news .log__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--ink-2);
}
.page-news .log__empty {
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--line);
}

/* ---------- guides ---------- */
.page-news .guides {
  border-top: 1px solid var(--hair);
  padding-block: clamp(40px, 6vw, 84px);
}
.page-news .guides__grid {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
}
.page-news .guides__text h2 {
  font-family: var(--font-serif);
  font-size: clamp(25px, 3.4vw, 36px);
  line-height: 1.24;
  margin: 0 0 14px;
  color: var(--mist);
}
.page-news .guides__text > p {
  margin: 0 0 26px;
  max-width: 56ch;
  line-height: 1.8;
  color: var(--line);
}
.page-news .guide-list {
  display: grid;
  gap: 1px;
  background: var(--hair);
  border-block: 1px solid var(--hair);
}
.page-news .guide {
  background: var(--ink);
  padding: 20px 16px;
  transition: background-color .18s ease;
}
.page-news .guide:hover { background: var(--ink-2); }
.page-news .guide h3 {
  margin: 0 0 10px;
  font-size: 17px;
  color: var(--mist);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.page-news .guide__no {
  color: var(--orange);
  font-size: 13px;
  letter-spacing: .14em;
}
.page-news .guide p {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--line);
}
.page-news .guide__link {
  color: var(--cyan);
  font-size: 13.5px;
  text-decoration: none;
  border-bottom: 1px solid rgba(61,224,255,.4);
  padding-bottom: 1px;
}
.page-news .guide__link:hover,
.page-news .guide__link:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
}
.page-news .guides__visual { margin: 0; }
.page-news .guides__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
  background: var(--ink-2);
  border: 1px solid var(--hair);
}
.page-news .guides__visual figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--line);
}

/* ---------- h2h features ---------- */
.page-news .h2h {
  border-top: 1px solid var(--hair);
  padding-block: clamp(40px, 6vw, 84px);
}
.page-news .h2h-grid {
  display: grid;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}
.page-news .h2h-card {
  background: var(--ink);
  padding: 24px 18px;
  position: relative;
  transition: background-color .18s ease;
}
.page-news .h2h-card:hover { background: var(--ink-3); }
.page-news .h2h-card__no {
  font-size: 12px;
  color: var(--cyan);
  letter-spacing: .16em;
  display: block;
  margin-bottom: 12px;
}
.page-news .h2h-card h3 {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--mist);
}
.page-news .h2h-card p {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--line);
}
.page-news .h2h-card__link {
  font-size: 13px;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,107,26,.4);
  padding-bottom: 1px;
}
.page-news .h2h-card__link:hover,
.page-news .h2h-card__link:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}
.page-news .h2h-card--accent {
  background: var(--news-cover-grad), var(--ink-2);
}
.page-news .h2h-card--accent h3 { color: var(--mist); }

/* ---------- proofreading ---------- */
.page-news .proof {
  border-top: 1px solid var(--hair);
  padding-block: clamp(40px, 6vw, 84px);
}
.page-news .proof__grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
}
.page-news .proof__text h2 {
  font-family: var(--font-serif);
  font-size: clamp(25px, 3.4vw, 36px);
  line-height: 1.24;
  margin: 0 0 16px;
  color: var(--mist);
}
.page-news .proof__text p {
  margin: 0 0 16px;
  line-height: 1.82;
  color: var(--line);
  max-width: 56ch;
}
.page-news .proof__text .btn { margin-top: 8px; }
.page-news .flow {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--hair-strong);
}
.page-news .flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 0 0 26px 20px;
}
.page-news .flow__step::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  width: 9px;
  height: 9px;
  background: var(--orange);
}
.page-news .flow__step:last-child { padding-bottom: 0; }
.page-news .flow__n {
  font-size: 13px;
  color: var(--cyan);
  letter-spacing: .1em;
  line-height: 1.6;
}
.page-news .flow__step h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--mist);
}
.page-news .flow__step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--line);
}

/* ---------- archive ---------- */
.page-news .archive {
  border-top: 1px solid var(--hair);
  padding-block: clamp(40px, 6vw, 84px) clamp(48px, 7vw, 96px);
}
.page-news .archive-grid {
  display: grid;
  gap: 12px;
}
.page-news .archive-fold {
  border: 1px solid var(--hair);
  background: var(--ink-2);
}
.page-news .archive-fold summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  border-left: 2px solid transparent;
  transition: border-color .16s ease, background-color .16s ease;
}
.page-news .archive-fold summary::-webkit-details-marker { display: none; }
.page-news .archive-fold summary:hover,
.page-news .archive-fold summary:focus-visible {
  border-left-color: var(--orange);
  background: var(--ink-3);
  outline: none;
}
.page-news .archive-fold__label {
  font-size: 16px;
  font-weight: 600;
  color: var(--mist);
  letter-spacing: .02em;
}
.page-news .archive-fold__hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--cyan);
}
.page-news .archive-fold__list {
  list-style: none;
  margin: 0;
  padding: 4px 18px 18px;
  border-top: 1px solid var(--hair);
}
.page-news .archive-fold__list li {
  padding: 12px 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--line);
  border-bottom: 1px solid var(--hair);
}
.page-news .archive-fold__list li:last-child { border-bottom: 0; }

.page-news .archive-cta {
  margin-top: clamp(28px, 4vw, 44px);
  padding: 24px 20px;
  border: 1px solid var(--hair-strong);
  background: linear-gradient(120deg, rgba(255,107,26,.1), transparent 58%);
}
.page-news .archive-cta p {
  margin: 0 0 18px;
  max-width: 58ch;
  line-height: 1.8;
  color: var(--line);
}
.page-news .archive-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- responsive ---------- */
@media (min-width: 640px) {
  .page-news .masthead-index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-news .cover-story__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-news .h2h-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-news .log__card {
    grid-template-columns: 1fr auto;
    align-items: start;
    padding: 24px 20px;
  }
  .page-news .log__thumb { width: 180px; }
}

@media (min-width: 900px) {
  .page-news .stories-masthead { padding-top: clamp(48px, 6vw, 84px); }
  .page-news .masthead-index { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .page-news .masthead-index a { flex-direction: column; gap: 6px; padding: 16px 14px; }
  .page-news .cover-story__grid {
    grid-template-columns: 1.15fr .85fr;
    align-items: end;
  }
  .page-news .cover-story__text { padding-bottom: 8px; }
  .page-news .section-head--split {
    grid-template-columns: 1fr .9fr;
    align-items: end;
    gap: 32px;
  }
  .page-news .guides__grid {
    grid-template-columns: 1.05fr .95fr;
    align-items: start;
  }
  .page-news .guides__visual { position: sticky; top: 24px; }
  .page-news .h2h-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-news .proof__grid {
    grid-template-columns: .95fr 1.05fr;
    gap: 56px;
    align-items: start;
  }
  .page-news .archive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
  .page-news .log__card { padding: 26px 24px; }
  .page-news .log__thumb { width: 220px; }
  .page-news .archive-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
  }
  .page-news .archive-cta p { margin: 0; }
}

@media (min-width: 1280px) {
  .page-news .log__card { grid-template-columns: 1fr 260px; }
  .page-news .log__thumb { width: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-news *,
  .page-news *::before,
  .page-news *::after {
    transition-duration: .001ms !important;
  }
}

.page-news {
  --news-cover-grad: linear-gradient(135deg, rgba(255,107,26,.16), rgba(61,224,255,.08) 62%, transparent 78%);
}

.page-news .stories-masthead {
  padding-top: clamp(28px, 5vw, 64px);
  padding-bottom: clamp(32px, 5vw, 72px);
  border-bottom: 1px solid var(--hair);
}
.page-news .stories-masthead .eyebrow {
  color: var(--orange);
  letter-spacing: .22em;
  font-size: 12px;
  margin: 0 0 18px;
}
.page-news .stories-masthead h1 {
  margin: 0 0 22px;
  font-family: var(--font-serif);
  font-size: clamp(34px, 7vw, 64px);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--mist);
  font-weight: 700;
}
.page-news .stories-masthead .lede {
  max-width: 62ch;
  font-size: clamp(16px, 1.9vw, 18px);
  line-height: 1.8;
  color: var(--line);
  margin: 0 0 28px;
}
.page-news .masthead-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hair);
  border-top: 1px solid var(--hair);
}
.page-news .masthead-index li { background: var(--ink); }
.page-news .masthead-index a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 14px;
  color: var(--mist);
  text-decoration: none;
  font-size: 14px;
  border-left: 2px solid transparent;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.page-news .masthead-index a:hover,
.page-news .masthead-index a:focus-visible {
  border-left-color: var(--orange);
  background: var(--ink-2);
  color: var(--orange);
}
.page-news .masthead-index .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan);
  letter-spacing: .06em;
}

.page-news .cover-story {
  position: relative;
  padding-block: clamp(40px, 6vw, 88px);
}
.page-news .cover-story__grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.page-news .cover-story__visual {
  margin: 0;
  position: relative;
}
.page-news .cover-story__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  background: var(--ink-2);
}
.page-news .cover-story__visual figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--line);
}
.page-news .cover-story__text h2 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.24;
  margin: 14px 0 20px;
  color: var(--mist);
}
.page-news .cover-story__text p {
  margin: 0 0 16px;
  line-height: 1.85;
  color: var(--line);
  max-width: 58ch;
}
.page-news .cover-story__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.page-news .cover-story__strip {
  margin-top: clamp(32px, 5vw, 56px);
  display: grid;
  gap: 1px;
  background: var(--hair);
  border-block: 1px solid var(--hair);
}
.page-news .strip-item {
  background: var(--ink);
  padding: 22px 18px;
}
.page-news .strip-item__num {
  display: block;
  color: var(--orange);
  font-size: 13px;
  letter-spacing: .2em;
  margin-bottom: 10px;
}
.page-news .strip-item h3 {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--mist);
  letter-spacing: .02em;
}
.page-news .strip-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--line);
}

.page-news .section-head { margin-bottom: clamp(24px, 3.4vw, 40px); }
.page-news .section-head .eyebrow {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  margin: 0 0 12px;
}
.page-news .section-head h2 {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: clamp(25px, 3.4vw, 36px);
  line-height: 1.24;
  color: var(--mist);
}
.page-news .section-head__lede {
  margin: 0;
  max-width: 62ch;
  line-height: 1.8;
  color: var(--line);
  font-size: 15.5px;
}
.page-news .section-head--split { display: grid; gap: 18px; }

.page-news .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.page-news .chip {
  appearance: none;
  border: 1px solid var(--hair-strong);
  background: transparent;
  color: var(--line);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 0;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.page-news .chip:hover { color: var(--orange); border-color: var(--orange); }
.page-news .chip.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);
  font-weight: 600;
}
.page-news .chip:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-news .log {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hair);
}
.page-news .log__item {
  border-bottom: 1px solid var(--hair);
}
.page-news .log__item[hidden] { display: none; }
.page-news .log__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 22px 16px 22px 14px;
  border-left: 2px solid transparent;
  transition: border-color .18s ease, background-color .18s ease;
}
.page-news .log__card:hover,
.page-news .log__card:focus-within {
  border-left-color: var(--orange);
  background: rgba(27, 42, 68, .55);
}
.page-news .log__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.page-news .log__num {
  font-size: 12px;
  color: var(--cyan);
  letter-spacing: .08em;
}
.page-news .log__time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--line);
  letter-spacing: .04em;
}
.page-news .tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .08em;
  padding: 3px 9px;
  color: var(--orange);
  border: 1px solid rgba(255,107,26,.45);
  background: rgba(255,107,26,.08);
}
.page-news .tag--orange {
  color: var(--orange-text);
  background: var(--orange-veil);
  border-color: transparent;
  font-weight: 600;
}
.page-news .tag--soft {
  color: var(--ink);
  background: var(--cyan-soft);
  border-color: transparent;
  margin-right: 10px;
}
.page-news .log__title {
  margin: 0 0 8px;
  font-size: clamp(16.5px, 2vw, 19px);
  line-height: 1.45;
  color: var(--mist);
  font-weight: 600;
}
.page-news .log__summary {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--line);
  max-width: 66ch;
}
.page-news .log__thumb {
  margin: 4px 0 0;
}
.page-news .log__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--ink-2);
}
.page-news .log__empty {
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--line);
}

.page-news .guides {
  border-top: 1px solid var(--hair);
  padding-block: clamp(40px, 6vw, 84px);
}
.page-news .guides__grid {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
}
.page-news .guides__text h2 {
  font-family: var(--font-serif);
  font-size: clamp(25px, 3.4vw, 36px);
  line-height: 1.24;
  margin: 0 0 14px;
  color: var(--mist);
}
.page-news .guides__text > p {
  margin: 0 0 26px;
  max-width: 56ch;
  line-height: 1.8;
  color: var(--line);
}
.page-news .guide-list {
  display: grid;
  gap: 1px;
  background: var(--hair);
  border-block: 1px solid var(--hair);
}
.page-news .guide {
  background: var(--ink);
  padding: 20px 16px;
  transition: background-color .18s ease;
}
.page-news .guide:hover { background: var(--ink-2); }
.page-news .guide h3 {
  margin: 0 0 10px;
  font-size: 17px;
  color: var(--mist);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.page-news .guide__no {
  color: var(--orange);
  font-size: 13px;
  letter-spacing: .14em;
}
.page-news .guide p {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--line);
}
.page-news .guide__link {
  color: var(--cyan);
  font-size: 13.5px;
  text-decoration: none;
  border-bottom: 1px solid rgba(61,224,255,.4);
  padding-bottom: 1px;
}
.page-news .guide__link:hover,
.page-news .guide__link:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
}
.page-news .guides__visual { margin: 0; }
.page-news .guides__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
  background: var(--ink-2);
  border: 1px solid var(--hair);
}
.page-news .guides__visual figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--line);
}

.page-news .h2h {
  border-top: 1px solid var(--hair);
  padding-block: clamp(40px, 6vw, 84px);
}
.page-news .h2h-grid {
  display: grid;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}
.page-news .h2h-card {
  background: var(--ink);
  padding: 24px 18px;
  position: relative;
  transition: background-color .18s ease;
}
.page-news .h2h-card:hover { background: var(--ink-3); }
.page-news .h2h-card__no {
  font-size: 12px;
  color: var(--cyan);
  letter-spacing: .16em;
  display: block;
  margin-bottom: 12px;
}
.page-news .h2h-card h3 {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--mist);
}
.page-news .h2h-card p {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--line);
}
.page-news .h2h-card__link {
  font-size: 13px;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,107,26,.4);
  padding-bottom: 1px;
}
.page-news .h2h-card__link:hover,
.page-news .h2h-card__link:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}
.page-news .h2h-card--accent {
  background: var(--news-cover-grad), var(--ink-2);
}

.page-news .proof {
  border-top: 1px solid var(--hair);
  padding-block: clamp(40px, 6vw, 84px);
}
.page-news .proof__grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
}
.page-news .proof__text h2 {
  font-family: var(--font-serif);
  font-size: clamp(25px, 3.4vw, 36px);
  line-height: 1.24;
  margin: 0 0 16px;
  color: var(--mist);
}
.page-news .proof__text p {
  margin: 0 0 16px;
  line-height: 1.82;
  color: var(--line);
  max-width: 56ch;
}
.page-news .proof__text .btn { margin-top: 8px; }
.page-news .flow {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--hair-strong);
}
.page-news .flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 0 0 26px 20px;
}
.page-news .flow__step::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  width: 9px;
  height: 9px;
  background: var(--orange);
}
.page-news .flow__step:last-child { padding-bottom: 0; }
.page-news .flow__n {
  font-size: 13px;
  color: var(--cyan);
  letter-spacing: .1em;
  line-height: 1.6;
}
.page-news .flow__step h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--mist);
}
.page-news .flow__step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--line);
}

.page-news .archive {
  border-top: 1px solid var(--hair);
  padding-block: clamp(40px, 6vw, 84px) clamp(48px, 7vw, 96px);
}
.page-news .archive-grid {
  display: grid;
  gap: 12px;
}
.page-news .archive-fold {
  border: 1px solid var(--hair);
  background: var(--ink-2);
}
.page-news .archive-fold summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  border-left: 2px solid transparent;
  transition: border-color .16s ease, background-color .16s ease;
}
.page-news .archive-fold summary::-webkit-details-marker { display: none; }
.page-news .archive-fold summary:hover,
.page-news .archive-fold summary:focus-visible {
  border-left-color: var(--orange);
  background: var(--ink-3);
  outline: none;
}
.page-news .archive-fold__label {
  font-size: 16px;
  font-weight: 600;
  color: var(--mist);
  letter-spacing: .02em;
}
.page-news .archive-fold__hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--cyan);
}
.page-news .archive-fold__list {
  list-style: none;
  margin: 0;
  padding: 4px 18px 18px;
  border-top: 1px solid var(--hair);
}
.page-news .archive-fold__list li {
  padding: 12px 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--line);
  border-bottom: 1px solid var(--hair);
}
.page-news .archive-fold__list li:last-child { border-bottom: 0; }

.page-news .archive-cta {
  margin-top: clamp(28px, 4vw, 44px);
  padding: 24px 20px;
  border: 1px solid var(--hair-strong);
  background: linear-gradient(120deg, rgba(255,107,26,.1), transparent 58%);
}
.page-news .archive-cta p {
  margin: 0 0 18px;
  max-width: 58ch;
  line-height: 1.8;
  color: var(--line);
}
.page-news .archive-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 640px) {
  .page-news .masthead-index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-news .cover-story__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-news .h2h-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-news .log__card {
    grid-template-columns: 1fr auto;
    align-items: start;
    padding: 24px 20px;
  }
  .page-news .log__thumb { width: 180px; }
}

@media (min-width: 900px) {
  .page-news .masthead-index { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .page-news .masthead-index a { flex-direction: column; gap: 6px; padding: 16px 14px; }
  .page-news .cover-story__grid {
    grid-template-columns: 1.15fr .85fr;
    align-items: end;
  }
  .page-news .section-head--split {
    grid-template-columns: 1fr .9fr;
    align-items: end;
    gap: 32px;
  }
  .page-news .guides__grid {
    grid-template-columns: 1.05fr .95fr;
    align-items: start;
  }
  .page-news .guides__visual { position: sticky; top: 24px; }
  .page-news .h2h-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-news .proof__grid {
    grid-template-columns: .95fr 1.05fr;
    gap: 56px;
    align-items: start;
  }
  .page-news .archive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
  .page-news .log__card { padding: 26px 24px; }
  .page-news .log__thumb { width: 220px; }
  .page-news .archive-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
  }
  .page-news .archive-cta p { margin: 0; }
}

@media (min-width: 1280px) {
  .page-news .log__card { grid-template-columns: 1fr 260px; }
  .page-news .log__thumb { width: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-news *,
  .page-news *::before,
  .page-news *::after {
    transition-duration: .001ms !important;
  }
}

<main id="main-content" class="page-news">
  <div class="container">
    <nav class="crumbs" aria-label="面包屑">
      <a href="/">看台首页</a>
      <span aria-hidden="true">/</span>
      <span aria-current="page">看台纪事</span>
    </nav>
  </div>

  <header class="container stories-masthead">
    <p class="eyebrow">05 — 看台纪事</p>
    <h1 class="display">把一轮轮赛事，读成一册翻得下去的看台画册</h1>
    <p class="lede">火狐体育的编辑部按周把赛季专题、赛程资料的变化、观赛指南与对阵档案整理成篇。你若刚坐下，从封面专题读起；只想跟住自家球队，直接翻最新更新；周末全家看球，家庭场景那几篇会更合手。</p>
    <ul class="masthead-index" aria-label="本页目录">
      <li><a href="#cover-story"><span class="num">01</span>封面专题</a></li>
      <li><a href="#latest-updates"><span class="num">02</span>最新更新</a></li>
      <li><a href="#watch-guides"><span class="num">03</span>观赛指南</a></li>
      <li><a href="#h2h-features"><span class="num">04</span>历史交锋专题</a></li>
      <li><a href="#proofreading"><span class="num">05</span>资料校对现场</a></li>
      <li><a href="#archive"><span class="num">06</span>专题归档</a></li>
    </ul>
  </header>

  <section id="cover-story" class="section cover-story" aria-labelledby="cover-title">
    <div class="container cover-story__grid">
      <figure class="cover-story__visual">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜晚城市地标与球场灯塔光束的广角抽象封面，橙色光带划过深蓝天空">
        <figcaption>本季专题封面 · 十二类赛事并读</figcaption>
      </figure>
      <div class="cover-story__text">
        <p class="tag tag--orange">赛季专题</p>
        <h2 id="cover-title" class="display display--sm">十二类赛事，排成一条读得下去的动线</h2>
        <p>足球、篮球领衔，连同另外十类赛事，本季专题把每个联赛的阶段切成可读的章节：开季哪些队伍值得留意，中段哪些对阵关系起了变化，收官时又该回看哪些数字。每章后面都挂着对应的赛程与对阵入口，读完顺势走进去。</p>
        <p>推荐顺序是：先读当轮看点，再看球队档案，最后落到本场比分与关键事件。像翻画册一样从左侧读到底，不必来回跳。</p>
        <div class="cover-story__actions">
          <a class="btn" href="/tools/">打开观赛工具</a>
          <a class="btn btn--ghost" href="/knowledge/">新手怎么读</a>
        </div>
      </div>
    </div>
    <div class="container cover-story__strip" aria-label="封面专题的三个章节">
      <article class="strip-item">
        <span class="mono strip-item__num">I</span>
        <h3>开季看点</h3>
        <p>新面孔、新阵容与换季后的对位关系，用一篇短文带你入座。</p>
      </article>
      <article class="strip-item">
        <span class="mono strip-item__num">II</span>
        <h3>中段读势</h3>
        <p>联赛走到一半，哪些对阵历史开始变得值得翻一翻。</p>
      </article>
      <article class="strip-item">
        <span class="mono strip-item__num">III</span>
        <h3>收官回看</h3>
        <p>把整季比分、阵容与关键事件串起来，读一次完整复盘。</p>
      </article>
    </div>
  </section>

  <section id="latest-updates" class="section latest" aria-labelledby="latest-title">
    <div class="container">
      <div class="section-head">
        <p class="eyebrow">02 — 最新更新</p>
        <h2 id="latest-title" class="display display--sm">这一周，看台上又落了新字</h2>
        <p class="section-head__lede">赛程、对阵索引、统计字段、关注列表与家庭字号回访，各有各的节奏。下面这些是最近落地的条目。</p>
      </div>

      <div class="filter-bar" role="group" aria-label="按分类筛选更新条目">
        <button type="button" class="chip is-active" data-filter="all">全部</button>
        <button type="button" class="chip" data-filter="资料更新">资料更新</button>
        <button type="button" class="chip" data-filter="体验迭代">体验迭代</button>
        <button type="button" class="chip" data-filter="观赛指南">观赛指南</button>
        <button type="button" class="chip" data-filter="历史交锋">历史交锋</button>
        <button type="button" class="chip" data-filter="家庭场景">家庭场景</button>
        <button type="button" class="chip" data-filter="赛季专题">赛季专题</button>
      </div>

      <ol class="log" data-log>
        <li class="log__item" data-cat="资料更新">
          <article class="log__card">
            <div class="log__meta">
              <span class="mono log__num">01</span>
              <span class="tag">资料更新</span>
              <span class="log__time">本季 · 周末批次</span>
            </div>
            <div class="log__body">
              <h3 class="log__title">赛程按周集中维护，周末连场更好排</h3>
              <p class="log__summary">每周整理三百场以上赛程条目，把比赛顺序、开赛时段与场地信息排在一条时间线上，一个周末要连看两场的人可以逐场跟进，不用反复翻页找下一场。</p>
            </div>
            <figure class="log__thumb">
              <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="抽象的赛程索引卡、等宽数字与青色检索线层叠在深蓝网格上">
            </figure>
          </article>
        </li>

        <li class="log__item" data-cat="历史交锋">
          <article class="log__card">
            <div class="log__meta">
              <span class="mono log__num">02</span>
              <span class="tag">历史交锋</span>
              <span class="log__time">本季 · 索引扩展</span>
            </div>
            <div class="log__body">
              <h3 class="log__title">对阵记录扩到两千四百组以上，球队档案同步补齐</h3>
              <p class="log__summary">按队名检索的老对手碰面记录继续增补，覆盖一百八十支球队档案。主客场、近期交锋与关键统计三类视图在同一入口切换，查某队的主场战绩不用来回跳。</p>
            </div>
          </article>
        </li>

        <li class="log__item" data-cat="资料更新">
          <article class="log__card">
            <div class="log__meta">
              <span class="mono log__num">03</span>
              <span class="tag">资料更新</span>
              <span class="log__time">近期 · 赛后集中更新</span>
            </div>
            <div class="log__body">
              <h3 class="log__title">终场之后，比分、阵容与关键事件分三路归档</h3>
              <p class="log__summary">想回看某场到底谁在什么时间做了什么，可以从统计页一路读回赛程页。三类字段分开存放，阵容变化与关键事件各占一条线，复盘时定位更快。</p>
            </div>
          </article>
        </li>

        <li class="log__item" data-cat="体验迭代">
          <article class="log__card">
            <div class="log__meta">
              <span class="mono log__num">04</span>
              <span class="tag">体验迭代</span>
              <span class="log__time">近期 · 版本迭代</span>
            </div>
            <div class="log__body">
              <h3 class="log__title">关注列表上限扩到三十个条目，首页优先呈现</h3>
              <p class="log__summary">常看的联赛和球队可以收藏到三十个。登录之后，首页与移动端赛程会把这些条目排到前面，不必每次从头翻找。</p>
            </div>
          </article>
        </li>

        <li class="log__item" data-cat="家庭场景">
          <article class="log__card">
            <div class="log__meta">
              <span class="mono log__num">05</span>
              <span class="tag">家庭场景</span>
              <span class="log__time">本季度 · 可读性回访</span>
            </div>
            <div class="log__body">
              <h3 class="log__title">家庭模式字号与列宽再调一轮，平板更顺手</h3>
              <p class="log__summary">每季度做一次手机与平板端的可读性回访，按真实阅读距离重新调正文字号、行间距与表格列宽，客厅里隔着茶几也能读清比分。</p>
            </div>
            <figure class="log__thumb">
              <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="客厅中平板显示大字号赛事页面的剪影，暖橙灯光与低干扰构图">
            </figure>
          </article>
        </li>

        <li class="log__item" data-cat="观赛指南">
          <article class="log__card">
            <div class="log__meta">
              <span class="mono log__num">06</span>
              <span class="tag">观赛指南</span>
              <span class="log__time">近期 · 新手指南</span>
            </div>
            <div class="log__body">
              <h3 class="log__title">新手三步压成一页：选赛事、查交锋、看赛后</h3>
              <p class="log__summary">第一次进来的人常卡在“从哪开始”。这份短指南只保留三个动作，按顺序做完就能独立看完一整场赛事的内容线。</p>
            </div>
          </article>
        </li>

        <li class="log__item" data-cat="体验迭代">
          <article class="log__card">
            <div class="log__meta">
              <span class="mono log__num">07</span>
              <span class="tag">体验迭代</span>
              <span class="log__time">近期 · 检索优化</span>
            </div>
            <div class="log__body">
              <h3 class="log__title">队名检索可以叠加赛事类型与联赛一起筛</h3>
              <p class="log__summary">输入队名后再叠一层赛事类型或联赛条件，把跨项目的同名情况拆开，查同一支队伍时不会被别的项目混进来。</p>
            </div>
          </article>
        </li>

        <li class="log__item" data-cat="赛季专题">
          <article class="log__card">
            <div class="log__meta">
              <span class="mono log__num">08</span>
              <span class="tag">赛季专题</span>
              <span class="log__time">本季 · 专题连载</span>
            </div>
            <div class="log__body">
              <h3 class="log__title">四个内容系列排好顺序，中途加入也找得到入口</h3>
              <p class="log__summary">赛季专题、新手指南、历史交锋档案与家庭观赛各自成册，按联赛阶段组织阅读顺序。中途加入的读者也能找到当期入口，不必从第一章补起。</p>
            </div>
          </article>
        </li>

        <li class="log__item" data-cat="资料更新">
          <article class="log__card">
            <div class="log__meta">
              <span class="mono log__num">09</span>
              <span class="tag">资料更新</span>
              <span class="log__time">近期 · 字段归档</span>
            </div>
            <div class="log__body">
              <h3 class="log__title">阵容与关键事件分成独立字段，回看更细</h3>
              <p class="log__summary">过去挤在一段文字里的阵容变化与关键事件，现在分列归档。想复盘某次换人带来的走势变化，可以直接定位到对应时间点。</p>
            </div>
          </article>
        </li>

        <li class="log__item" data-cat="家庭场景">
          <article class="log__card">
            <div class="log__meta">
              <span class="mono log__num">10</span>
              <span class="tag">家庭场景</span>
              <span class="log__time">近期 · 场景指南</span>
            </div>
            <div class="log__body">
              <h3 class="log__title">一家人围着一块屏，怎么分着看不同场次</h3>
              <p class="log__summary">同一时段两场比赛时，谁看主屏、谁用平板，怎么在关注列表里各存各的球队。这篇把家庭观赛最常见的分歧拆成几条可操作的排法。</p>
            </div>
          </article>
        </li>

        <li class="log__item" data-cat="历史交锋">
          <article class="log__card">
            <div class="log__meta">
              <span class="mono log__num">11</span>
              <span class="tag">历史交锋</span>
              <span class="log__time">本季 · 档案补录</span>
            </div>
            <div class="log__body">
              <h3 class="log__title">主客场视图拆开看，比分背后才有上下文</h3>
              <p class="log__summary">同一组对阵拆成主客场两种视角，哪些比分是在自家看台下打出来的，一眼能分辨，读赛前展望时心里更有底。</p>
            </div>
          </article>
        </li>

        <li class="log__item" data-cat="观赛指南">
          <article class="log__card">
            <div class="log__meta">
              <span class="mono log__num">12</span>
              <span class="tag">观赛指南</span>
              <span class="log__time">近期 · 周末专题</span>
            </div>
            <div class="log__body">
              <h3 class="log__title">周末连着看两场，中间那段空档怎么用</h3>
              <p class="log__summary">两场之间通常有一段间隙，正好够翻完上一场的阵容与关键事件，再瞄一眼下一场的近期交锋，衔接起来不至于断档。</p>
            </div>
          </article>
        </li>
      </ol>
      <p class="log__empty" data-log-empty hidden>这个分类下暂时没有条目，换个标签试试。</p>
    </div>
  </section>

  <section id="watch-guides" class="section guides" aria-labelledby="guides-title">
    <div class="container guides__grid">
      <div class="guides__text">
        <p class="eyebrow">03 — 观赛指南</p>
        <h2 id="guides-title" class="display display--sm">把工具用进真实的看球时刻</h2>
        <p>指南不讲功能清单，只回答“那天晚上你该怎么办”。三种最常见的情形，各有一篇对应的读法。</p>

        <div class="guide-list">
          <article class="guide">
            <h3><span class="mono guide__no">A</span>第一次进来，三步走完</h3>
            <p>先挑一类赛事，再按队名查一次历史交锋，最后在赛后统计里核对刚看完的那场。三步做完，你就知道这儿在哪找什么了。</p>
            <a class="guide__link" href="/knowledge/">去看新手问答</a>
          </article>
          <article class="guide">
            <h3><span class="mono guide__no">B</span>周末连看两场</h3>
            <p>把当晚两场都加进关注列表，赛程会按开赛顺序排好。第一场结束先别急着关页面，趁间隙读完阵容与关键事件，再看第二场的前情。</p>
            <a class="guide__link" href="/tools/">打开移动端赛程</a>
          </article>
          <article class="guide">
            <h3><span class="mono guide__no">C</span>一家人一起看</h3>
            <p>切到家庭模式，字号变大、干扰变少。长辈读比分，孩子认队名，各自在自己的设备上收藏喜欢的球队，一台平板也能分屏商量。</p>
            <a class="guide__link" href="/company/">了解家庭适配</a>
          </article>
        </div>
      </div>
      <figure class="guides__visual">
        <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" loading="lazy" decoding="async" alt="三步上手信息图，橙色大号步骤数字、手机轮廓与赛程条目排列在深色背景上">
        <figcaption>三步上手 · 选赛事、查交锋、看赛后</figcaption>
      </figure>
    </div>
  </section>

  <section id="h2h-features" class="section h2h" aria-labelledby="h2h-title">
    <div class="container">
      <div class="section-head section-head--split">
        <div>
          <p class="eyebrow">04 — 历史交锋专题</p>
          <h2 id="h2h-title" class="display display--sm">老对手再碰面，先翻翻旧账</h2>
        </div>
        <p class="section-head__lede">一组对阵值不值得细读，往往看它们过去碰过多少次。这些专题按球队档案组织，进去之后可以按队名继续检索。</p>
      </div>

      <div class="h2h-grid">
        <article class="h2h-card">
          <span class="mono h2h-card__no">01</span>
          <h3>球队档案：一百八十支队伍的来路</h3>
          <p>每支队伍都有主客场、近期交锋和关键统计三类视图。想弄清某队在自家看台下的战绩，从档案页就能看到分项。</p>
          <a class="h2h-card__link" href="/tools/">按队名检索</a>
        </article>
        <article class="h2h-card">
          <span class="mono h2h-card__no">02</span>
          <h3>主客场拆开看，比分才有上下文</h3>
          <p>同一组对阵，主场赢下的分和客场拿到的分意义不同。把两种视角并排摆出来，赛前讨论就不容易空对空。</p>
          <a class="h2h-card__link" href="/tools/">查看对阵视图</a>
        </article>
        <article class="h2h-card">
          <span class="mono h2h-card__no">03</span>
          <h3>近期交锋：只挑最近几回合</h3>
          <p>整段历史太长，专题会先把最近几回合拎出来，让你在几分钟内把握这两队当下的相对位置。</p>
          <a class="h2h-card__link" href="/tools/">进入交锋档案</a>
        </article>
        <article class="h2h-card h2h-card--accent">
          <span class="mono h2h-card__no">04</span>
          <h3>两千四百组以上的对阵记录</h3>
          <p>本季资料库里已积累两千四百组以上的对阵记录，覆盖足球、篮球等十二类赛事，够你慢慢翻。</p>
          <a class="h2h-card__link" href="/knowledge/">新手怎么查</a>
        </article>
      </div>
    </div>
  </section>

  <section id="proofreading" class="section proof" aria-labelledby="proof-title">
    <div class="container proof__grid">
      <div class="proof__text">
        <p class="eyebrow">05 — 资料校对现场</p>
        <h2 id="proof-title" class="display display--sm">一场比赛的资料，要过两道手</h2>
        <p>二十六人的内容团队里，有九位专门做赛事资料校对。赛程、比分、阵容与关键事件各自归档，每一条都要经第二个人看过才落定。这么做只为一件事：周六晚上你查到的比分，周日早上再打开时仍是同一个。</p>
        <p>前端体验组五个人负责版式与可读性，每季度做一次手机与平板的回访；客服支持四位同事，工作日九点到六点接住资料纠错与功能疑问。</p>
        <a class="btn btn--ghost" href="/reach-us/">提交资料纠错</a>
      </div>

      <div class="proof__flow" aria-label="双人复核与字段归档流程">
        <ol class="flow">
          <li class="flow__step">
            <span class="mono flow__n">1</span>
            <div>
              <h3>初录</h3>
              <p>比赛结束，由资料编辑录入比分、阵容与关键事件，按字段分开填写。</p>
            </div>
          </li>
          <li class="flow__step">
            <span class="mono flow__n">2</span>
            <div>
              <h3>复核</h3>
              <p>第二位校对同事逐字段对照，确认无误后归档，异常项退回重录。</p>
            </div>
          </li>
          <li class="flow__step">
            <span class="mono flow__n">3</span>
            <div>
              <h3>归档</h3>
              <p>三类字段分库存放，历史交锋与赛后统计同步可查，方便随时回看。</p>
            </div>
          </li>
          <li class="flow__step">
            <span class="mono flow__n">4</span>
            <div>
              <h3>回访</h3>
              <p>每季度调一次字号、间距与表格列宽，让客厅那块屏也读得清。</p>
            </div>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section id="archive" class="section archive" aria-labelledby="archive-title">
    <div class="container">
      <div class="section-head">
        <p class="eyebrow">06 — 专题归档</p>
        <h2 id="archive-title" class="display display--sm">按你记得的那条线索去找</h2>
        <p class="section-head__lede">有人记得赛事类型，有人记得当时在用哪台设备。三种归档方式，任选一条线索展开。</p>
      </div>

      <div class="archive-grid">
        <details class="archive-fold" open>
          <summary>
            <span class="archive-fold__label">按赛事类型</span>
            <span class="archive-fold__hint">足球 · 篮球等十二类</span>
          </summary>
          <ul class="archive-fold__list">
            <li><span class="tag tag--soft">足球</span>联赛阶段看点、对阵关系变化与收官复盘</li>
            <li><span class="tag tag--soft">篮球</span>阵容轮换、关键回合与赛后统计读法</li>
            <li><span class="tag tag--soft">其他十类</span>按赛季节奏编排的简明导读与资料索引</li>
          </ul>
        </details>

        <details class="archive-fold">
          <summary>
            <span class="archive-fold__label">按使用场景</span>
            <span class="archive-fold__hint">新手 · 周末 · 家庭</span>
          </summary>
          <ul class="archive-fold__list">
            <li><span class="tag tag--soft">第一次来</span>三步上手指南与常见疑问解答</li>
            <li><span class="tag tag--soft">周末连看</span>赛程排序、场间空档与关注列表配置</li>
            <li><span class="tag tag--soft">家庭共看</span>大字号布局、设备分工与低干扰阅读</li>
          </ul>
        </details>

        <details class="archive-fold">
          <summary>
            <span class="archive-fold__label">按内容系列</span>
            <span class="archive-fold__hint">四个连载系列</span>
          </summary>
          <ul class="archive-fold__list">
            <li><span class="tag tag--soft">赛季专题</span>按联赛阶段组织的当期封面与连载</li>
            <li><span class="tag tag--soft">新手指南</span>从选赛事到看赛后的完整入门线</li>
            <li><span class="tag tag--soft">历史交锋档案</span>球队档案、主客场视图与近期交锋</li>
            <li><span class="tag tag--soft">家庭观赛</span>适配手机与平板两种尺寸的阅读内容</li>
          </ul>
        </details>
      </div>

      <div class="archive-cta">
        <p>想直接动手？工具页里能设置关注列表、按队名检索交锋，赛后统计也在同一处。</p>
        <div class="archive-cta__actions">
          <a class="btn" href="/tools/">去观赛工具</a>
          <a class="btn btn--ghost" href="/">回看台首页</a>
        </div>
      </div>
    </div>
  </section>
</main>

.page-news {
  --news-cover-grad: linear-gradient(135deg, rgba(255,107,26,.16), rgba(61,224,255,.08) 62%, transparent 78%);
}

.page-news .stories-masthead {
  padding-top: clamp(28px, 5vw, 64px);
  padding-bottom: clamp(32px, 5vw, 72px);
  border-bottom: 1px solid var(--hair);
}
.page-news .stories-masthead .eyebrow {
  color: var(--orange);
  letter-spacing: .22em;
  font-size: 12px;
  margin: 0 0 18px;
}
.page-news .stories-masthead h1 {
  margin: 0 0 22px;
  font-family: var(--font-serif);
  font-size: clamp(32px, 6.6vw, 60px);
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--mist);
  font-weight: 700;
}
.page-news .stories-masthead .lede {
  max-width: 62ch;
  font-size: clamp(16px, 1.9vw, 18px);
  line-height: 1.8;
  color: var(--line);
  margin: 0 0 28px;
}
.page-news .masthead-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hair);
  border-top: 1px solid var(--hair);
}
.page-news .masthead-index li { background: var(--ink); }
.page-news .masthead-index a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 14px;
  color: var(--mist);
  text-decoration: none;
  font-size: 14px;
  border-left: 2px solid transparent;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.page-news .masthead-index a:hover,
.page-news .masthead-index a:focus-visible {
  border-left-color: var(--orange);
  background: var(--ink-2);
  color: var(--orange);
}
.page-news .masthead-index .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan);
  letter-spacing: .06em;
}

.page-news .cover-story {
  position: relative;
  padding-block: clamp(40px, 6vw, 88px);
}
.page-news .cover-story__grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.page-news .cover-story__visual {
  margin: 0;
  position: relative;
}
.page-news .cover-story__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  background: var(--ink-2);
}
.page-news .cover-story__visual figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--line);
}
.page-news .cover-story__text h2 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.24;
  margin: 14px 0 20px;
  color: var(--mist);
}
.page-news .cover-story__text p {
  margin: 0 0 16px;
  line-height: 1.85;
  color: var(--line);
  max-width: 58ch;
}
.page-news .cover-story__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.page-news .cover-story__strip {
  margin-top: clamp(32px, 5vw, 56px);
  display: grid;
  gap: 1px;
  background: var(--hair);
  border-block: 1px solid var(--hair);
}
.page-news .strip-item {
  background: var(--ink);
  padding: 22px 18px;
}
.page-news .strip-item__num {
  display: block;
  color: var(--orange);
  font-size: 13px;
  letter-spacing: .2em;
  margin-bottom: 10px;
}
.page-news .strip-item h3 {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--mist);
  letter-spacing: .02em;
}
.page-news .strip-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--line);
}

.page-news .section-head { margin-bottom: clamp(24px, 3.4vw, 40px); }
.page-news .section-head .eyebrow {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  margin: 0 0 12px;
}
.page-news .section-head h2 {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: clamp(25px, 3.4vw, 36px);
  line-height: 1.24;
  color: var(--mist);
}
.page-news .section-head__lede {
  margin: 0;
  max-width: 62ch;
  line-height: 1.8;
  color: var(--line);
  font-size: 15.5px;
}
.page-news .section-head--split { display: grid; gap: 18px; }

.page-news .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.page-news .chip {
  appearance: none;
  border: 1px solid var(--hair-strong);
  background: transparent;
  color: var(--line);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 0;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.page-news .chip:hover { color: var(--orange); border-color: var(--orange); }
.page-news .chip.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);
  font-weight: 600;
}
.page-news .chip:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-news .log {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hair);
}
.page-news .log__item {
  border-bottom: 1px solid var(--hair);
}
.page-news .log__item[hidden] { display: none; }
.page-news .log__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 22px 16px 22px 14px;
  border-left: 2px solid transparent;
  transition: border-color .18s ease, background-color .18s ease;
}
.page-news .log__card:hover,
.page-news .log__card:focus-within {
  border-left-color: var(--orange);
  background: rgba(27, 42, 68, .55);
}
.page-news .log__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.page-news .log__num {
  font-size: 12px;
  color: var(--cyan);
  letter-spacing: .08em;
}
.page-news .log__time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--line);
  letter-spacing: .04em;
}
.page-news .tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .08em;
  padding: 3px 9px;
  color: var(--orange);
  border: 1px solid rgba(255,107,26,.45);
  background: rgba(255,107,26,.08);
}
.page-news .tag--orange {
  color: var(--orange-text);
  background: var(--orange-veil);
  border-color: transparent;
  font-weight: 600;
}
.page-news .tag--soft {
  color: var(--ink);
  background: var(--cyan-soft);
  border-color: transparent;
  margin-right: 10px;
}
.page-news .log__title {
  margin: 0 0 8px;
  font-size: clamp(16.5px, 2vw, 19px);
  line-height: 1.45;
  color: var(--mist);
  font-weight: 600;
}
.page-news .log__summary {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--line);
  max-width: 66ch;
}
.page-news .log__thumb {
  margin: 4px 0 0;
}
.page-news .log__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--ink-2);
}
.page-news .log__empty {
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--line);
}

.page-news .guides {
  border-top: 1px solid var(--hair);
  padding-block: clamp(40px, 6vw, 84px);
}
.page-news .guides__grid {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
}
.page-news .guides__text h2 {
  font-family: var(--font-serif);
  font-size: clamp(25px, 3.4vw, 36px);
  line-height: 1.24;
  margin: 0 0 14px;
  color: var(--mist);
}
.page-news .guides__text > p {
  margin: 0 0 26px;
  max-width: 56ch;
  line-height: 1.8;
  color: var(--line);
}
.page-news .guide-list {
  display: grid;
  gap: 1px;
  background: var(--hair);
  border-block: 1px solid var(--hair);
}
.page-news .guide {
  background: var(--ink);
  padding: 20px 16px;
  transition: background-color .18s ease;
}
.page-news .guide:hover { background: var(--ink-2); }
.page-news .guide h3 {
  margin: 0 0 10px;
  font-size: 17px;
  color: var(--mist);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.page-news .guide__no {
  color: var(--orange);
  font-size: 13px;
  letter-spacing: .14em;
}
.page-news .guide p {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--line);
}
.page-news .guide__link {
  color: var(--cyan);
  font-size: 13.5px;
  text-decoration: none;
  border-bottom: 1px solid rgba(61,224,255,.4);
  padding-bottom: 1px;
}
.page-news .guide__link:hover,
.page-news .guide__link:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
}
.page-news .guides__visual { margin: 0; }
.page-news .guides__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
  background: var(--ink-2);
  border: 1px solid var(--hair);
}
.page-news .guides__visual figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--line);
}

.page-news .h2h {
  border-top: 1px solid var(--hair);
  padding-block: clamp(40px, 6vw, 84px);
}
.page-news .h2h-grid {
  display: grid;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}
.page-news .h2h-card {
  background: var(--ink);
  padding: 24px 18px;
  position: relative;
  transition: background-color .18s ease;
}
.page-news .h2h-card:hover { background: var(--ink-3); }
.page-news .h2h-card__no {
  font-size: 12px;
  color: var(--cyan);
  letter-spacing: .16em;
  display: block;
  margin-bottom: 12px;
}
.page-news .h2h-card h3 {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--mist);
}
.page-news .h2h-card p {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--line);
}
.page-news .h2h-card__link {
  font-size: 13px;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,107,26,.4);
  padding-bottom: 1px;
}
.page-news .h2h-card__link:hover,
.page-news .h2h-card__link:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}
.page-news .h2h-card--accent {
  background: var(--news-cover-grad), var(--ink-2);
}

.page-news .proof {
  border-top: 1px solid var(--hair);
  padding-block: clamp(40px, 6vw, 84px);
}
.page-news .proof__grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
}
.page-news .proof__text h2 {
  font-family: var(--font-serif);
  font-size: clamp(25px, 3.4vw, 36px);
  line-height: 1.24;
  margin: 0 0 16px;
  color: var(--mist);
}
.page-news .proof__text p {
  margin: 0 0 16px;
  line-height: 1.82;
  color: var(--line);
  max-width: 56ch;
}
.page-news .proof__text .btn { margin-top: 8px; }
.page-news .flow {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--hair-strong);
}
.page-news .flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 0 0 26px 20px;
}
.page-news .flow__step::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  width: 9px;
  height: 9px;
  background: var(--orange);
}
.page-news .flow__step:last-child { padding-bottom: 0; }
.page-news .flow__n {
  font-size: 13px;
  color: var(--cyan);
  letter-spacing: .1em;
  line-height: 1.6;
}
.page-news .flow__step h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--mist);
}
.page-news .flow__step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--line);
}

.page-news .archive {
  border-top: 1px solid var(--hair);
  padding-block: clamp(40px, 6vw, 84px) clamp(48px, 7vw, 96px);
}
.page-news .archive-grid {
  display: grid;
  gap: 12px;
}
.page-news .archive-fold {
  border: 1px solid var(--hair);
  background: var(--ink-2);
}
.page-news .archive-fold summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  border-left: 2px solid transparent;
  transition: border-color .16s ease, background-color .16s ease;
}
.page-news .archive-fold summary::-webkit-details-marker { display: none; }
.page-news .archive-fold summary:hover,
.page-news .archive-fold summary:focus-visible {
  border-left-color: var(--orange);
  background: var(--ink-3);
  outline: none;
}
.page-news .archive-fold__label {
  font-size: 16px;
  font-weight: 600;
  color: var(--mist);
  letter-spacing: .02em;
}
.page-news .archive-fold__hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--cyan);
}
.page-news .archive-fold__list {
  list-style: none;
  margin: 0;
  padding: 4px 18px 18px;
  border-top: 1px solid var(--hair);
}
.page-news .archive-fold__list li {
  padding: 12px 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--line);
  border-bottom: 1px solid var(--hair);
}
.page-news .archive-fold__list li:last-child { border-bottom: 0; }

.page-news .archive-cta {
  margin-top: clamp(28px, 4vw, 44px);
  padding: 24px 20px;
  border: 1px solid var(--hair-strong);
  background: linear-gradient(120deg, rgba(255,107,26,.1), transparent 58%);
}
.page-news .archive-cta p {
  margin: 0 0 18px;
  max-width: 58ch;
  line-height: 1.8;
  color: var(--line);
}
.page-news .archive-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 640px) {
  .page-news .masthead-index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-news .cover-story__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-news .h2h-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-news .log__card {
    grid-template-columns: 1fr auto;
    align-items: start;
    padding: 24px 20px;
  }
  .page-news .log__thumb { width: 180px; }
}

@media (min-width: 900px) {
  .page-news .stories-masthead { padding-top: clamp(48px, 6vw, 84px); }
  .page-news .masthead-index { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .page-news .masthead-index a { flex-direction: column; gap: 6px; padding: 16px 14px; }
  .page-news .cover-story__grid {
    grid-template-columns: 1.15fr .85fr;
    align-items: end;
  }
  .page-news .cover-story__text { padding-bottom: 8px; }
  .page-news .section-head--split {
    grid-template-columns: 1fr .9fr;
    align-items: end;
    gap: 32px;
  }
  .page-news .guides__grid {
    grid-template-columns: 1.05fr .95fr;
    align-items: start;
  }
  .page-news .guides__visual { position: sticky; top: 24px; }
  .page-news .h2h-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-news .proof__grid {
    grid-template-columns: .95fr 1.05fr;
    gap: 56px;
    align-items: start;
  }
  .page-news .archive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
  .page-news .log__card { padding: 26px 24px; }
  .page-news .log__thumb { width: 220px; }
  .page-news .archive-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
  }
  .page-news .archive-cta p { margin: 0; }
}

@media (min-width: 1280px) {
  .page-news .log__card { grid-template-columns: 1fr 260px; }
  .page-news .log__thumb { width: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-news *,
  .page-news *::before,
  .page-news *::after {
    transition-duration: .001ms !important;
  }
}