@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Shrikhand&family=Space+Grotesk:wght@400..700&display=swap');

:root {
  --pop-forest: #15211b;
  --pop-lime: #d4fa59;
  --pop-ube: #5f37d6;
  --pop-lilac: #eee8ff;
  --pop-ice: #e8f4f7;
  --pop-paper: #ffffff;
  --pop-canvas: #f8f9f8;
  --pop-line: #cad4cd;
  --pop-muted: #46564d;
  --pop-head: "Bricolage Grotesque", "Arial Black", Arial, sans-serif;
  --pop-body: "Space Grotesk", Arial, Helvetica, sans-serif;
  --pop-mark: "Shrikhand", "Bricolage Grotesque", Georgia, serif;
  --ink: var(--pop-forest);
  --paper: var(--pop-paper);
  --accent: var(--pop-ube);
  --rule: var(--pop-line);
  --rule-light: #dae2dc;
  --muted: var(--pop-muted);
  --news-font: var(--pop-body);
  --micro-font: var(--pop-body);
  --display-font: var(--pop-head);
  --incident-paper: var(--pop-paper);
  --incident-ink: var(--pop-forest);
  --incident-red: var(--pop-ube);
  --incident-muted: var(--pop-muted);
  color-scheme: light;
}


html, body { color: var(--pop-forest); background: var(--pop-paper); }
body, body * { font-family: var(--pop-body) !important; }
body :is(h1, h2, h3, .siren-headline, .home-zimbo-card strong,
  .river-headline a, .story-link, .cartoon-title, .quote-text,
  .power-dek, .power-header h1, .incident-header h1, .doom-result-value,
  .dossier-title, .dossier-cover-title, .rank-name, .fp-meta strong) {
  font-family: var(--pop-head) !important;
}
body :is(.masthead .logo a, .site-wordmark, .publication-wordmark) {
  font-family: var(--pop-mark) !important;
  font-weight: 400 !important;
}
body { background: var(--pop-paper) !important; }
body :is(input, button, select, textarea, summary) { font-family: var(--pop-body) !important; }
:where(main, article, section, .page, .simple-page, .power-page, .doom-page,
  .incident-page, .quote-page, .quotes-index, .brief-page, .smoke-page,
  .dossier-page) { color: var(--pop-forest); }
:where(p, li, dd, blockquote) { overflow-wrap: break-word; }
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--pop-ube) !important;
  outline-offset: 3px;
}
:where(a) { text-underline-offset: .17em; }
:where(a:hover, a:focus-visible) { color: var(--pop-ube); }
:where(img) { max-width: 100%; }


.masthead {
  background: var(--pop-lime);
  border: 0;
  border-radius: 0 0 19px 19px;
  padding: clamp(14px, 2.2vw, 25px);
  margin: 0 0 20px;
  color: var(--pop-forest);
}
.masthead .logo { margin: 0; line-height: 1.05; }
.masthead .logo a {
  color: var(--pop-forest) !important;
  font-size: clamp(34px, 6.2vw, 78px);
  line-height: 1.06;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
  text-decoration: none !important;
}
.masthead .edition-meta,
.masthead .masthead-subscribe a { color: var(--pop-forest) !important; }
.masthead .edition-meta { font-weight: 600; }
.slimnav {
  border-top: 1px solid rgb(21 33 27 / .25);
  gap: 6px 9px;
  margin-top: 12px;
  padding-top: 11px;
  letter-spacing: 0;
}
.slimnav a,
.slimnav a:hover,
.slimnav a:focus-visible {
  color: var(--pop-forest) !important;
  background: transparent;
  border: 1px solid var(--pop-forest);
  border-radius: 999px;
  box-shadow: none;
  padding: 7px 12px;
  text-decoration: none;
  transform: none;
  transition: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}
.slimnav a:hover,
.slimnav a:focus-visible { background: var(--pop-paper); }
.slimnav a.slimnav-cartoons,
.slimnav a.slimnav-cartoons:hover,
.slimnav a.slimnav-cartoons:focus-visible {
  background: var(--pop-ube);
  color: var(--pop-paper) !important;
  border: 2px solid var(--pop-forest);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--pop-forest);
  padding: 8px 17px;
  font-size: 15px;
  letter-spacing: 0;
  transform: rotate(-1.5deg);
}
.slimnav a.slimnav-cartoons:hover,
.slimnav a.slimnav-cartoons:focus-visible { transform: rotate(-1.5deg) translateY(-1px); }


#main[data-homepage="true"] {
  --ink: var(--pop-forest);
  --paper: var(--pop-paper);
  --accent: var(--pop-ube);
  color: var(--pop-forest);
  background: var(--pop-paper);
}
#main[data-homepage="true"] .masthead {
  background: var(--pop-lime);
  border-radius: 0 0 19px 19px;
}
#main[data-homepage="true"] .masthead .logo a {
  font-family: var(--pop-mark) !important;
  font-size: clamp(34px, 6.2vw, 78px);
  font-weight: 400 !important;
}
#main[data-homepage="true"] .home-zimbo-kicker { color: var(--pop-ube); }
#main[data-homepage="true"] .home-zimbo-head h2 {
  font-family: var(--pop-head) !important;
  letter-spacing: -.05em;
}
#main[data-homepage="true"] .home-zimbo-all,
#main[data-homepage="true"] .home-news-head a {
  color: var(--pop-forest);
  text-underline-offset: 3px;
}
#main[data-homepage="true"] .home-zimbo-card img,
#main[data-homepage="true"] .story-cartoon-image {
  height: auto;
  border-color: var(--pop-line);
  background: white;
}

#main[data-homepage="true"] .home-zimbo-card img,
#main[data-homepage="true"] .story-cartoon-image,
.page .story-cartoon-image,
.cartoon-page .cartoon-full,
.cartoon-page .cartoon-list-thumb,
.cartoon-page .cartoon-more-card img,
.brief-page .brief-cartoon-image {
  border-radius: 10px;
}
#main[data-homepage="true"] .siren {
  background: var(--pop-lilac);
  border-radius: 19px;
  box-shadow: 5px 5px 0 var(--pop-forest);
  margin-right: 5px;
  margin-bottom: 32px;
}
#main[data-homepage="true"] .siren-headline {
  font-family: var(--pop-head) !important;
  letter-spacing: -.04em;
}
#main[data-homepage="true"] .home-news-head {
  border-color: var(--pop-forest);
  color: var(--pop-forest);
}
#main[data-homepage="true"] .river .river-link {
  color: var(--pop-forest);
  text-decoration: underline;
  text-decoration-color: rgb(21 33 27 / .36);
  text-decoration-thickness: 1px;
  text-underline-offset: .17em;
}
#main[data-homepage="true"] .river .river-link:hover,
#main[data-homepage="true"] .river .river-link:focus-visible {
  color: var(--pop-ube);
  text-decoration-color: currentColor;
}
#main[data-homepage="true"] .river-story,
#main[data-homepage="true"] .river-whisper {
  border-bottom-color: var(--pop-line);
}
#main[data-homepage="true"] .river .river-rels { color: var(--pop-muted); }


.page { color: var(--pop-forest); }
.page :is(.story-franchise, .river-franchise, .story-kicker) { color: var(--pop-ube); }
.page :is(.river-story, .story-group) { border-color: var(--pop-line); }
.page :is(.river-link, .story-link) { color: var(--pop-forest); }
.page :is(.river-link:hover, .story-link:hover) { color: var(--pop-ube); }


:is(.simple-page, .dossier-page, .power-page, .incident-page,
  .quote-page, .quotes-index, .brief-page, .smoke-page, .doom-page) {
  --ink: var(--pop-forest);
  --paper: var(--pop-paper);
  --accent: var(--pop-ube);
  --rule: var(--pop-line);
  --muted: var(--pop-muted);
  background: var(--pop-paper);
  color: var(--pop-forest);
}
:is(.incident-page, .power-page, .doom-page, .quote-page, .quotes-index,
  .brief-page, .smoke-page, .dossier-page) :where(h1, h2) {
  color: var(--pop-forest);
}
:is(.incident-header, .power-header, .quote-header, .quotes-index-header,
  .brief-header, .smoke-header) {
  border-top-color: var(--pop-forest);
  border-bottom-color: var(--pop-forest);
}
:is(.incident-kicker, .power-kicker, .power-provocation, .quote-kind-label,
  .brief-kicker, .smoke-kicker) {
  background: var(--pop-ube);
  color: #fff;
  border-color: var(--pop-ube);
}
:is(.incident-header h1 span, .power-header h1 span, .quote-kicker,
  .brief-kicker, .power-next-update, .story-franchise,
  .quote-date-note) { color: var(--pop-ube); }
:is(.quote-figure, .quote-card, .power-card, .incident-card) {
  border-color: var(--pop-forest);
}
:is(.quote-figure, .quote-card) {
  background: var(--pop-lilac);
  box-shadow: 4px 4px 0 var(--pop-forest);
}
:is(.incident-feature, .incident-header, .power-index, .power-header,
  .quote-header, .quotes-index-header, .brief-header, .smoke-header) {
  border-color: var(--pop-forest);
}
:is(.incident-updated, .incident-dek, .power-thesis,
  .doom-dek, .quotes-index-dek) { color: var(--pop-muted); }
:is(.power-index a, .incident-page a, .quote-page a, .brief-page a,
  .smoke-page a, .dossier-page a):hover { color: var(--pop-ube); }
.doom-page {
  --doom-ink: var(--pop-forest);
  --doom-muted: var(--pop-muted);
  --doom-line: var(--pop-line);
  --doom-wash: var(--pop-lilac);
}
.doom-header h1 span,
.doom-result-label { color: var(--pop-ube); }
.doom-result-value { color: var(--pop-forest); }
.doom-headline { border-color: var(--pop-line); }
.dossier-page .dossier-global-nav,
.simple-page .dossier-global-nav {
  background: var(--pop-forest);
  border-color: var(--pop-forest);
}
.dossier-page .dossier-global-nav .dossier-global-nav-primary,
.simple-page .dossier-global-nav .dossier-global-nav-primary {
  background: var(--pop-ube);
}
:is(.dossier-page, .topics-index-page, .topic-index-page)
  :is(.dossier-hero, .dossier-art, .topic-featured-art, .dossier-cover-art) {
  background: var(--pop-lilac);
}
:is(.dossier-page, .topics-index-page, .topic-index-page)
  :is(.dossier-kicker, .topic-kicker, .profile-kicker) { color: var(--pop-ube); }


:is(.publication-footer, footer) {
  border-color: var(--pop-line);
  color: var(--pop-forest);
}
:is(.publication-footer, footer) :where(a) { color: inherit; }
:is(.publication-footer, footer) :where(a:hover, a:focus-visible) { color: var(--pop-ube); }
:is(.footer-popular, .homepage-discovery) :where(h2, h3) {
  font-family: var(--pop-head) !important;
}
:where(button, [role="button"], summary) { cursor: pointer; }
:where(button, [role="button"]) { border-radius: 10px; }
:is(.consent-banner) {
  background: var(--pop-lilac);
  color: var(--pop-forest);
  border-color: var(--pop-forest);
}



.dossier-page[data-dossier-id],
.dossier-page.dossier-index {
  --ink: var(--pop-forest);
  --paper: var(--pop-paper);
  --accent: var(--pop-ube);
  --muted: var(--pop-muted);
  --rule-light: var(--pop-line);
  --dossier-pink: var(--pop-lilac);
  --dossier-sky: var(--pop-ice);
  background: var(--pop-paper);
  color: var(--pop-forest);
}
.dossier-page :is(.dossier-global-nav-primary, .dossier-kicker, .dossier-role-label) {
  color: var(--pop-ube);
}
.dossier-page .dossier-global-nav .dossier-global-nav-primary { color: #fff; }
.rogues-art,
.dossier-cast-entry:hover { background: var(--pop-lilac); }

.primer-page, .primer-index, .primer-reading {
  --ink: var(--pop-forest);
  --paper: var(--pop-paper);
  --accent: var(--pop-ube);
  background: var(--pop-paper);
  color: var(--pop-forest);
}
.primer-reading .primer-short-answer,
.primer-directory-tabloid,
.primer-exhibit,
.primer-reading .ma-chart {
  background: var(--pop-lilac) !important;
  border-color: var(--pop-forest) !important;
  box-shadow: 5px 5px 0 var(--pop-forest);
}
.primer-split article:last-child,
.primer-steel-men article:nth-child(even) {
  border-color: var(--pop-ube);
}
.primer-index .primer-directory a:hover { background: var(--pop-lime); }
.guide-shelf-art, .primer-binge-art,
.guide-new-card .guide-card-image img,
.guide-feature-card .guide-card-image img {
  background: var(--pop-lilac);
}

.quotes-player-head { background: var(--pop-lilac); border-color: var(--pop-forest); }
.quotes-choice:hover:not(:disabled) { background: var(--pop-lime); }
.quotes-choice.is-wrong { background: var(--pop-lilac); border-color: var(--pop-ube); }
.quote-figure, .quote-card {
  background: var(--pop-lilac);
  border-color: var(--pop-forest);
  box-shadow: 4px 4px 0 var(--pop-forest);
}
.power-page {
  --accent: var(--pop-ube);
  --ink: var(--pop-forest);
}
.power-binge-number,
.power-binge-count span { color: var(--pop-ube); }
.power-jump-network button[data-power-binge-from-list],
.power-binge-controls button:last-child {
  background: var(--pop-ube);
  border-color: var(--pop-forest);
  color: #fff;
}
.incident-page .incident-kicker { background: var(--pop-ube); }
.incident-page .incident-header h1 span { color: var(--pop-ube); }


@media (max-width: 700px) {
  .masthead { border-radius: 0 0 14px 14px; padding: 12px 10px; }
  .masthead .logo a,
  #main[data-homepage="true"] .masthead .logo a {
    font-size: clamp(30px, 9.1vw, 53px);
    line-height: 1.08;
  }
  .slimnav { gap: 6px; }
  .slimnav a, .slimnav a:hover, .slimnav a:focus-visible {
    font-size: 11px;
    padding: 6px 9px;
    white-space: normal;
  }
  .slimnav a.slimnav-cartoons,
  .slimnav a.slimnav-cartoons:hover,
  .slimnav a.slimnav-cartoons:focus-visible {
    font-size: 13px;
    padding: 7px 12px;
  }
  #main[data-homepage="true"] .siren { box-shadow: 3px 3px 0 var(--pop-forest); margin-right: 3px; }
  #main[data-homepage="true"] .home-zimbo-head { flex-wrap: wrap; }
  #main[data-homepage="true"] .home-zimbo-all { white-space: nowrap; }
  :is(.simple-page, .dossier-page, .power-page, .doom-page, .incident-page)
    :where(h1, h2, h3) { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .slimnav a, .slimnav a:hover, .slimnav a:focus-visible { transition: none; }
}


#main[data-homepage="true"] .masthead { padding: 16px 20px; margin-bottom: 22px; }
#main[data-homepage="true"] .masthead .logo a { font-size: clamp(34px, 5vw, 64px); }
#main[data-homepage="true"] .masthead .logo .ai { font-family: inherit !important; }
.masthead-tagline { margin: 8px 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.masthead .slimnav { justify-content: flex-start; align-items: center; }
.slimnav-files { position: relative; }
.slimnav-files > summary {
  list-style: none; border: 1px solid var(--pop-forest); border-radius: 999px;
  padding: 7px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0;
}
.slimnav-files > summary::after { content: ' +'; }
.slimnav-files[open] > summary::after { content: ' −'; }
.slimnav-files > summary::-webkit-details-marker { display: none; }
.slimnav-files-menu {
  position: absolute; z-index: 10; top: calc(100% + 8px); right: 0;
  width: min(240px, 80vw); padding: 8px; border: 1px solid var(--pop-forest);
  border-radius: 10px; background: var(--pop-paper); box-shadow: 3px 3px 0 var(--pop-lilac);
}
.masthead .slimnav-files-menu a {
  display: block; border: 0; border-radius: 4px; padding: 9px; white-space: normal;
}
.masthead .slimnav-files-menu a:hover { background: var(--pop-lilac); }
#main[data-homepage="true"] .siren {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center; gap: 24px; margin: 0 3px 26px 0; padding: 24px; text-align: left;
}
#main[data-homepage="true"] .siren-copy { min-width: 0; }
#main[data-homepage="true"] .siren-copy:only-child { grid-column: 1 / -1; }
#main[data-homepage="true"] .siren-headline {
  font-size: clamp(36px, 4.7vw, 68px); line-height: 1.02; margin: 0 0 14px;
}
#main[data-homepage="true"] .siren-headline a { color: var(--pop-forest); }
#main[data-homepage="true"] .siren-sub { font-size: 17px; font-weight: 400; line-height: 1.35; }
#main[data-homepage="true"] .siren-art { min-width: 0; }
#main[data-homepage="true"] .siren .group-image {
  width: auto; height: auto; max-width: 100%; max-height: 360px;
  margin: 0 auto; object-fit: contain;
}
#main[data-homepage="true"] .home-news-head { max-width: none; margin: 24px 0 8px; font-size: 20px; }
#main[data-homepage="true"] .river {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start;
  gap: 8px 26px; max-width: none; margin: 0;
}
#main[data-homepage="true"] .river-story,
#main[data-homepage="true"] .river-whisper { min-width: 0; padding: 16px 0; }
#main[data-homepage="true"] .river .shout-link { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; }
#main[data-homepage="true"] .river .standard-link { font-size: clamp(20px, 1.8vw, 25px); line-height: 1.18; }
#main[data-homepage="true"] .river .river-rels {
  font-size: 14px; font-weight: 400; line-height: 1.4; margin: 7px 0 10px;
}
#main[data-homepage="true"] .river .river-art.story-cartoon-image {
  float: none; display: block; width: auto; height: auto;
  max-width: 100%; max-inline-size: 100%; max-height: 360px; max-block-size: 360px;
  margin: 12px auto 0; object-fit: contain;
}
#main[data-homepage="true"] .river .river-art:not(.story-cartoon-image) {
  float: right; max-width: 40%; max-height: 150px; margin: 10px 0 8px 12px;
}
#main[data-homepage="true"] .river .newsroom-sighting { display: none; }
#main[data-homepage="true"] .river-more,
#main[data-homepage="true"] .river-endcap { grid-column: 1 / -1; }
#main[data-homepage="true"] .home-zimbo {
  border-top: 2px solid var(--pop-forest); padding-top: 20px; margin-top: 30px;
}
#main[data-homepage="true"] .home-zimbo-head h2 { font-size: clamp(26px, 3vw, 40px); }
@media (min-width: 701px) and (max-width: 1050px) {
  #main[data-homepage="true"] .river { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  #main[data-homepage="true"] .masthead { padding: 13px 12px; }
  #main[data-homepage="true"] .masthead .logo a { font-size: clamp(30px, 9.1vw, 53px); }
  .masthead-tagline { font-size: 10px; letter-spacing: .04em; }
  #main[data-homepage="true"] .siren { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px 14px; }
  #main[data-homepage="true"] .siren-headline { font-size: clamp(32px, 9vw, 48px); }
  #main[data-homepage="true"] .siren-sub { font-size: 15px; }
  #main[data-homepage="true"] .siren .group-image { max-height: 340px; }
  #main[data-homepage="true"] .river { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #main[data-homepage="true"] .river .shout-link { font-size: 26px; }
  #main[data-homepage="true"] .river .standard-link { font-size: 22px; }
}