.cns-story {
  --ink: #252d28;
  --muted: #525d55;
  --accent: #435e4b;
  --line: #dde1db;
  --serif: "ResonayText-Light", Georgia, serif;
  --serif-title: "ResonayText-Regular", Georgia, serif;
  --sans: "RumikoClear-Regular", system-ui, sans-serif;
  --h1-size: clamp(32px, calc(29.03px + .762vw), 40px);
  --h2-size: clamp(30px, calc(26.29px + .952vw), 40px);
  --h3-size: clamp(23px, calc(20.4px + .667vw), 30px);
  --h4-size: clamp(17px, calc(14.03px + .762vw), 25px);
  --small-size: clamp(14px, calc(13.63px + .0952vw), 15px);
  --body-size: clamp(15px, 2vw, 17px);
  --gutter: clamp(24px, 6.67vw, 96px);
  color: var(--ink);
  background: #fff;
  font: 400 var(--body-size)/1.6 var(--sans);
}
.cns-story *, .cns-story *::before, .cns-story *::after { box-sizing: border-box; }
.cns-story .cns-story__wrap { width: min(100%, 1440px); margin-inline: auto; padding-inline: var(--gutter); }
.cns-story :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  color: var(--ink);
  font: 400 var(--h2-size)/1.15 var(--serif);
  text-transform: none;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}
.cns-story h1 { font-family: var(--serif-title); font-size: var(--h1-size); }
.cns-story h3 { font-size: var(--h3-size); }
.cns-story h4 { font-size: var(--h4-size); }
.cns-story :is(h5, h6) { font-family: var(--sans); font-size: var(--small-size); }
.cns-story h6 { font-size: clamp(12px, calc(11.63px + .0952vw), 13px); }
.cns-story p { margin: 0; color: var(--muted); }
.cns-story a { color: var(--accent); text-decoration: underline; text-underline-offset: .22em; }
.cns-story a:hover { text-decoration-thickness: 2px; }
.cns-story a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.cns-story .cns-story__label { color: var(--accent); font-size: var(--small-size); letter-spacing: .12em; text-transform: uppercase; }
.cns-story__read, .cns-story__support a { font-size: 14px; }
.cns-story__intro { display: grid; gap: 24px; padding-block: 65px 66px; border-bottom: 1px solid var(--line); }
.cns-story__intro-row { display: flex; align-items: end; justify-content: space-between; gap: 12px 32px; }
.cns-story__intro-row a { font-size: 12px; text-transform: uppercase; }
.cns-story__selection { padding-block: 20px 80px; }
.cns-story__selection > .cns-story__label { margin-bottom: 22px; }
.cns-story__card--featured { display: grid; grid-template-columns: minmax(0, 648fr) minmax(0, 536fr); gap: clamp(26px, 4.45vw, 64px); align-items: start; }
.cns-story__card--featured:not(:has(.cns-story__image)) { grid-template-columns: minmax(0, 680px); }
.cns-story__image { aspect-ratio: 600 / 350; background: #f0f2ed; }
.cns-story__card--featured .cns-story__image { aspect-ratio: 648 / 456; }
.cns-story .cns-story__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cns-story__card-content { display: grid; align-content: start; gap: 12px; padding-top: 15px; }
.cns-story__card--featured .cns-story__card-content { padding-top: clamp(16px, 2.8vw, 40px); gap: 18px; }
.cns-story .cns-story__card-content h3 + p { font-size: var(--small-size); }
.cns-story .cns-story__card-content :is(h2, h3) a { color: inherit; text-decoration: none; }
.cns-story .cns-story__card-content :is(h2, h3) a:hover { text-decoration: underline; }
.cns-story__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; color: var(--muted); font-size: 12px; }
.cns-story__card--featured .cns-story__meta { justify-content: start; }
.cns-story__meta span { color: var(--accent); text-transform: uppercase; }
.cns-story__archive { border-top: 1px solid var(--line); padding-block: 38px 96px; scroll-margin-top: 100px; }
.cns-story__topics { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 16px; }
.cns-story .cns-story__topics a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; text-decoration: none; border-bottom: 2px solid transparent; }
.cns-story .cns-story__topics a[aria-current], .cns-story .cns-story__topics a:hover { border-color: var(--accent); }
.cns-story__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 48px; }
.cns-story__archive :is(h2, .cns-story__topics) + :is(.cns-story__grid, p) { margin-top: 28px; }
.cns-story__pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.cns-story .cns-story__pages a { padding: 10px 20px; min-height: 44px; border: 1px solid #b6c0b7; text-decoration: none; }
.cns-story .cns-story__pages a:hover { background: #f0f2ed; }
.cns-story .cns-story__newsletter-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding-inline: 22px;
  color: #fff;
  background: var(--accent);
  text-decoration: none;
}
.cns-story .cns-story__newsletter-link:hover { text-decoration: underline; }
.cns-story__newsletter { background: #f0f2ed; padding-block: 65px; }
.cns-story__split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 24px clamp(32px, 6.66vw, 96px); }
.cns-story__split h2 { margin-block: 12px 14px; }
.cns-story__support { padding-block: 80px; }
.cns-story__support a { display: inline-block; margin-top: 14px; }
.cns-story__form :is(input[type="email"], button, input[type="submit"]) { min-height: 48px; max-width: 100%; font: inherit; }
.cns-story__form input[type="email"] { padding: 10px 14px; border: 1px solid #68706a; background: #fff; color: var(--ink); }
.cns-story__form :is(button, input[type="submit"]) { padding: 10px 22px; border: 1px solid var(--accent); background: var(--accent); color: #fff; }
@media (max-width: 720px) {
  .cns-story__intro { gap: 18px; padding-block: 40px 36px; }
  .cns-story__intro-row { flex-direction: column; align-items: start; }
  .cns-story__selection { padding-block: 20px 56px; }
  .cns-story__card--featured, .cns-story__grid, .cns-story__split { grid-template-columns: minmax(0, 1fr); }
  .cns-story__card--featured .cns-story__image { aspect-ratio: 342 / 270; }
  .cns-story__card--featured .cns-story__card-content { padding-top: 0; }
  .cns-story__archive { padding-block: 28px 64px; }
  .cns-story__topics { gap: 0 18px; }
  .cns-story__newsletter, .cns-story__support { padding-block: 44px; }
  .cns-story__form :is(input[type="email"], button, input[type="submit"]) { width: 100%; }
}
