body[data-theme] {
  --theme-radius: 18px;
  --theme-radius-small: 11px;
  --theme-shadow: 0 16px 34px rgb(28 22 52 / 11%);
}

body[data-theme="pop-press"] {
  --ink: #211a3d;
  --ink-soft: #4e4568;
  --paper: #fff6ed;
  --surface: #fffdf9;
  --surface-muted: #ffe8d4;
  --line: #ead6c7;
  --signal: #ff5268;
  --signal-dark: #d93654;
  --teal: #00a89e;
  --blue: #4c63e8;
  --gold: #f6ba32;
  --muted: #756b7d;
  --theme-deep: #30265d;
  --theme-release: #465fe2;
  --theme-newsletter: #ffd25c;
  --theme-ad: #ffe2c3;
  --pop-sky: #91b5ff;
  --pop-lilac: #b9a6ff;
  --pop-pink: #ff92bb;
  --pop-peach: #ffc995;
  --pop-mint: #8fded4;
  --theme-radius: 18px;
}

body[data-theme="neo-capsule"] {
  --ink: #19152d;
  --ink-soft: #514b70;
  --paper: #f4f2ff;
  --surface: #fefeff;
  --surface-muted: #e9e4ff;
  --line: #dcd5f2;
  --signal: #8657e8;
  --signal-dark: #6438c5;
  --teal: #00aeb5;
  --blue: #3567f2;
  --gold: #b6d72b;
  --muted: #6c6682;
  --theme-deep: #211a3e;
  --theme-release: #087f8b;
  --theme-newsletter: #cae94a;
  --theme-ad: #e3dcff;
  --theme-radius: 28px;
  --theme-radius-small: 16px;
  --theme-shadow: 0 18px 42px rgb(54 40 100 / 14%);
}

body[data-theme="soft-signal"] {
  --ink: #203640;
  --ink-soft: #4c6268;
  --paper: #fff8f1;
  --surface: #fffefa;
  --surface-muted: #ffeadf;
  --line: #e7d9cf;
  --signal: #ff7465;
  --signal-dark: #d95049;
  --teal: #2f9c88;
  --blue: #4d94d0;
  --gold: #e9ac3d;
  --muted: #6c797b;
  --theme-deep: #315f6d;
  --theme-release: #347e8e;
  --theme-newsletter: #ffd7c4;
  --theme-ad: #e7f2e8;
  --theme-radius: 22px;
  --theme-radius-small: 13px;
  --theme-shadow: 0 15px 36px rgb(44 70 72 / 10%);
}

body[data-theme] .masthead {
  padding-inline: 18px;
}

body[data-theme] .locale-switch a.is-current,
body[data-theme] .status-chip,
body[data-theme] .article-tags span {
  border-radius: 999px;
}

body[data-theme] .brand__mark {
  min-width: 56px;
}

body[data-theme] .section-nav {
  border: 0;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 9px 24px rgb(35 27 62 / 7%);
}

body[data-theme] .section-nav__inner {
  gap: 5px;
  padding-block: 5px;
}

body[data-theme] .section-nav a {
  padding: 8px 11px;
  border-radius: 999px;
}

body[data-theme] .section-nav a:hover,
body[data-theme] .section-nav a.is-active {
  background: color-mix(in srgb, var(--signal) 16%, var(--surface));
  color: var(--signal-dark);
}

body[data-theme] .section-nav a::after {
  display: none;
}

body[data-theme] .locale-switch {
  gap: 6px;
  border: 0;
}

body[data-theme] .locale-switch a {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  line-height: 1;
}

body[data-theme] .lead-story,
body[data-theme] .release-section,
body[data-theme] .report-hero,
body[data-theme] .advertise-intro {
  overflow: hidden;
  border-radius: calc(var(--theme-radius) + 5px);
  background: var(--theme-deep);
  box-shadow: var(--theme-shadow);
}

body[data-theme] .lead-story {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr);
}

body[data-theme] .lead-story__copy {
  justify-content: center;
}

html:lang(ja) body[data-theme] .lead-story h1 {
  line-height: 1.08;
  letter-spacing: -.02em;
}

body[data-theme] .lead-story > .media-frame,
body[data-theme] .report-hero .media-frame {
  border-radius: 0;
}

body[data-theme] .story-grid,
body[data-theme] .article-feed,
body[data-theme] .section-directory {
  gap: 13px;
  border: 0;
  background: transparent;
}

body[data-theme] .story-card,
body[data-theme] .feed-card,
body[data-theme] .section-directory > a,
body[data-theme] .trend-panel,
body[data-theme] .figure-detail,
body[data-theme] .article-header,
body[data-theme] .article-hero,
body[data-theme] .article-content,
body[data-theme] .article-tags,
body[data-theme] .author-card,
body[data-theme] .enquiry-panel,
body[data-theme] .tip-dialog__card {
  overflow: hidden;
  border-radius: var(--theme-radius);
  box-shadow: var(--theme-shadow);
}

body[data-theme] .trend-panel li {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
}

body[data-theme] .author-card > img,
body[data-theme] .author-card > .portrait-placeholder {
  border-radius: 50%;
}

body[data-theme] .article-hero,
body[data-theme] .article-content,
body[data-theme] .article-tags {
  border-radius: 0;
  box-shadow: none;
}

body[data-theme] .article-hero {
  margin-top: 14px;
  border-radius: var(--theme-radius) var(--theme-radius) 0 0;
}

body[data-theme] .article-tags {
  border-radius: 0 0 var(--theme-radius) var(--theme-radius);
}

body[data-theme] .media-frame,
body[data-theme] .figure-card > .media-frame,
body[data-theme] .contributor-card > .media-frame,
body[data-theme] .report-card .media-frame,
body[data-theme] .related-stories .media-frame {
  border-radius: var(--theme-radius-small);
}

body[data-theme] .article-hero .media-frame,
body[data-theme] .figure-detail__visual {
  padding: clamp(12px, 1.5vw, 18px);
  border-radius: 0;
  background: transparent;
}

body[data-theme] .article-hero .media-frame::before,
body[data-theme] .figure-detail__visual::before {
  display: none;
}

body[data-theme] .article-hero .media-frame > img,
body[data-theme] .figure-detail__visual > img {
  border-radius: var(--theme-radius-small);
}

body[data-theme] .article-hero figcaption {
  padding-inline: clamp(12px, 1.5vw, 18px);
}

body[data-theme] .story-card > .media-frame,
body[data-theme] .feed-card > .media-frame {
  border-radius: var(--theme-radius) 0 0 var(--theme-radius);
}

body[data-theme] .story-card--wide > .media-frame {
  border-radius: var(--theme-radius) 0 0 var(--theme-radius);
}

body[data-theme] .release-section {
  background: var(--theme-release);
}

body[data-theme] .release-card {
  border: 0;
  border-radius: var(--theme-radius-small);
  background: rgb(255 255 255 / 13%);
}

body[data-theme] .release-card p,
body[data-theme] .release-card time {
  color: rgb(255 255 255 / 76%);
}

body[data-theme] .newsletter-box {
  border: 0;
  border-radius: calc(var(--theme-radius) + 4px);
  background: var(--theme-newsletter);
  box-shadow: var(--theme-shadow);
}

body[data-theme] .ad-slot {
  border-color: color-mix(in srgb, var(--signal) 20%, var(--line));
  border-radius: var(--theme-radius);
  background: var(--theme-ad);
}

body[data-theme] input,
body[data-theme] textarea,
body[data-theme] select,
body[data-theme] .button,
body[data-theme] .share-button,
body[data-theme] .dialog-close {
  border-radius: var(--theme-radius-small);
}

body[data-theme] .button {
  padding-inline: 20px;
}

body[data-theme] .section-heading {
  position: relative;
  align-items: center;
  padding-bottom: 16px;
  border: 0;
}

body[data-theme] .section-heading > div {
  min-width: 0;
  align-items: center;
}

body[data-theme] .section-heading > a {
  flex: 0 0 auto;
  align-self: center;
  padding-bottom: 0;
  line-height: 1.2;
}

body[data-theme] .section-heading::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 7px;
  border-radius: 999px;
  background: var(--signal);
  content: "";
}

body[data-theme] .section-heading > div > span,
body[data-theme] .trend-panel li > span {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--signal);
  color: white;
  font-size: 15px;
  font-style: normal;
  line-height: 1;
  text-align: center;
}

html:lang(en) body[data-theme] .section-heading > div > span,
html:lang(fr) body[data-theme] .section-heading > div > span,
html:lang(en) body[data-theme] .trend-panel li > span,
html:lang(fr) body[data-theme] .trend-panel li > span {
  font-family: "DynaPuff", "Arimo", sans-serif !important;
  font-weight: 700;
  font-synthesis: none;
}

html:lang(ja) body[data-theme] .section-heading > div > span,
html:lang(ja) body[data-theme] .trend-panel li > span {
  font-family: "Mochiy Pop One", "Noto Sans JP", sans-serif !important;
  font-weight: 400;
  font-synthesis: none;
}

body[data-theme] .section-heading--dark {
  border: 0;
}

body[data-theme] .section-heading--dark::after {
  background: rgb(255 255 255 / 78%);
}

body[data-theme] .section-heading--dark > div > span {
  background: white;
  color: var(--theme-release);
}

body[data-theme] .figure-card,
body[data-theme] .contributor-card,
body[data-theme] .report-card {
  padding: 14px;
  border: 0;
  border-radius: var(--theme-radius);
  background: var(--surface);
  box-shadow: var(--theme-shadow);
}

body[data-theme] .page-intro {
  margin-top: 22px;
  padding: 42px;
  border: 0;
  border-radius: calc(var(--theme-radius) + 5px);
  background: var(--surface-muted);
}

body[data-theme] .page-intro.advertise-intro {
  background: var(--theme-deep);
}

/* Pop Press color accents */
body[data-theme="pop-press"] .lead-story__copy {
  background:
    radial-gradient(circle at 102% 4%, rgb(255 146 187 / 30%), transparent 43%),
    radial-gradient(circle at -5% 108%, rgb(76 99 232 / 36%), transparent 46%),
    var(--theme-deep);
}

body[data-theme="pop-press"] .page-intro {
  background:
    radial-gradient(circle at 94% 12%, rgb(255 146 187 / 20%), transparent 36%),
    radial-gradient(circle at 8% 105%, rgb(145 181 255 / 22%), transparent 43%),
    linear-gradient(135deg, #fff9f3, #f8f5ff);
}

body[data-theme="pop-press"] .story-card:nth-child(3n + 1) .story-card__copy,
body[data-theme="pop-press"] .feed-card:nth-child(3n + 1) > div {
  background:
    radial-gradient(circle at 100% 0, rgb(145 181 255 / 17%), transparent 52%),
    linear-gradient(145deg, var(--surface), #fafbff);
}

body[data-theme="pop-press"] .story-card:nth-child(3n + 2) .story-card__copy,
body[data-theme="pop-press"] .feed-card:nth-child(3n + 2) > div {
  background:
    radial-gradient(circle at 100% 100%, rgb(255 146 187 / 14%), transparent 55%),
    linear-gradient(145deg, var(--surface), #fff8fa);
}

body[data-theme="pop-press"] .story-card:nth-child(3n) .story-card__copy,
body[data-theme="pop-press"] .feed-card:nth-child(3n) > div {
  background:
    radial-gradient(circle at 0 100%, rgb(185 166 255 / 17%), transparent 52%),
    linear-gradient(145deg, var(--surface), #faf8ff);
}

body[data-theme="pop-press"] .section-directory > a:nth-child(3n + 1),
body[data-theme="pop-press"] .figure-card:nth-child(3n + 1),
body[data-theme="pop-press"] .contributor-card:nth-child(3n + 1),
body[data-theme="pop-press"] .report-card:nth-child(3n + 1) {
  background:
    radial-gradient(circle at 108% 104%, rgb(145 181 255 / 18%), transparent 44%),
    var(--surface);
}

body[data-theme="pop-press"] .section-directory > a:nth-child(3n + 2),
body[data-theme="pop-press"] .figure-card:nth-child(3n + 2),
body[data-theme="pop-press"] .contributor-card:nth-child(3n + 2),
body[data-theme="pop-press"] .report-card:nth-child(3n + 2) {
  background:
    radial-gradient(circle at 105% -5%, rgb(255 201 149 / 21%), transparent 43%),
    radial-gradient(circle at -8% 108%, rgb(255 146 187 / 12%), transparent 42%),
    var(--surface);
}

body[data-theme="pop-press"] .section-directory > a:nth-child(3n),
body[data-theme="pop-press"] .figure-card:nth-child(3n),
body[data-theme="pop-press"] .contributor-card:nth-child(3n),
body[data-theme="pop-press"] .report-card:nth-child(3n) {
  background:
    radial-gradient(circle at 100% 100%, rgb(143 222 212 / 18%), transparent 47%),
    var(--surface);
}

body[data-theme="pop-press"] .trend-panel {
  background:
    radial-gradient(circle at 100% 100%, rgb(185 166 255 / 17%), transparent 48%),
    linear-gradient(155deg, var(--surface) 38%, #fbf9ff);
}

body[data-theme="pop-press"] .release-section {
  background:
    radial-gradient(circle at 94% 5%, rgb(255 146 187 / 25%), transparent 34%),
    radial-gradient(circle at 4% 100%, rgb(143 222 212 / 18%), transparent 38%),
    linear-gradient(135deg, #465fe2, #5548ad);
}

body[data-theme="pop-press"] .release-card:nth-child(odd) {
  background: linear-gradient(135deg, rgb(255 255 255 / 12%), rgb(255 255 255 / 5%));
}

body[data-theme="pop-press"] .release-card:nth-child(even) {
  background: linear-gradient(135deg, rgb(255 210 92 / 10%), rgb(255 255 255 / 6%));
}

body[data-theme="pop-press"] .newsletter-box {
  background:
    radial-gradient(circle at 4% 105%, rgb(255 146 187 / 22%), transparent 39%),
    radial-gradient(circle at 96% -5%, rgb(255 246 184 / 38%), transparent 38%),
    linear-gradient(135deg, #ffd87b, #ffc98f);
}

body[data-theme="pop-press"] .article-header {
  background:
    radial-gradient(circle at 102% 0, rgb(255 146 187 / 18%), transparent 38%),
    radial-gradient(circle at -5% 106%, rgb(145 181 255 / 15%), transparent 42%),
    var(--surface);
}

body[data-theme="pop-press"] .author-card,
body[data-theme="pop-press"] .figure-detail,
body[data-theme="pop-press"] .enquiry-panel {
  background:
    radial-gradient(circle at 102% 102%, rgb(185 166 255 / 15%), transparent 43%),
    radial-gradient(circle at 0 0, rgb(143 222 212 / 9%), transparent 35%),
    var(--surface);
}

body[data-theme] .search-form input {
  border-radius: var(--theme-radius-small) 0 0 var(--theme-radius-small);
}

body[data-theme] .search-form .button {
  border-radius: 0 var(--theme-radius-small) var(--theme-radius-small) 0;
}

body[data-theme="pop-press"] .report-hero,
body[data-theme="pop-press"] .page-intro.advertise-intro {
  background:
    radial-gradient(circle at 92% 4%, rgb(255 146 187 / 23%), transparent 35%),
    radial-gradient(circle at 8% 105%, rgb(76 99 232 / 31%), transparent 42%),
    var(--theme-deep);
}

body[data-theme="pop-press"] .ad-slot {
  background:
    radial-gradient(circle at 100% 0, rgb(255 146 187 / 15%), transparent 42%),
    linear-gradient(135deg, var(--theme-ad), #fff7e9);
}

body[data-theme] .site-footer {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--theme-deep);
  box-shadow: none;
}

body[data-theme="neo-capsule"] .lead-story,
body[data-theme="neo-capsule"] .report-hero,
body[data-theme="neo-capsule"] .advertise-intro {
  border: 5px solid color-mix(in srgb, var(--teal) 70%, white);
}

body[data-theme="neo-capsule"] .story-card,
body[data-theme="neo-capsule"] .feed-card,
body[data-theme="neo-capsule"] .figure-card,
body[data-theme="neo-capsule"] .contributor-card,
body[data-theme="neo-capsule"] .report-card {
  border: 2px solid color-mix(in srgb, var(--blue) 22%, var(--line));
}

body[data-theme="neo-capsule"] .button,
body[data-theme="neo-capsule"] input,
body[data-theme="neo-capsule"] select {
  border-radius: 999px;
}

body[data-theme="soft-signal"] .story-card,
body[data-theme="soft-signal"] .feed-card {
  border: 1px solid var(--line);
}

@media (max-width: 800px) {
  body[data-theme] .masthead {
    padding-inline: 14px;
  }

  body[data-theme] .page-intro {
    padding: 28px 20px;
  }

  body[data-theme] .story-card > .media-frame,
  body[data-theme] .feed-card > .media-frame,
  body[data-theme] .story-card--wide > .media-frame {
    border-radius: var(--theme-radius) var(--theme-radius) 0 0;
  }

  body[data-theme] .search-form input,
  body[data-theme] .search-form .button {
    border-radius: var(--theme-radius-small);
  }
}