/* Reader metrics preview: editorial ink, paper and a restrained oxblood data accent. */
.reader-metrics-page {
  --reader-metrics-ink: #171513;
  --reader-metrics-red: #99192f;
  --reader-metrics-muted: #706a64;
  --reader-metrics-rule: #d8d2ca;
  --reader-metrics-paper: #fffefa;
  max-width: 1500px;
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 90px;
  color: var(--reader-metrics-ink);
}

.reader-metrics-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px 48px;
  border-bottom: 1px solid #a9a198;
  padding: 45px 0 33px;
}

.reader-metrics-hero > * { min-width: 0; }
.reader-metrics-hero h2 {
  margin: 9px 0 13px;
  font: 400 clamp(42px, 4vw, 61px)/.98 Georgia, "Times New Roman", serif;
  letter-spacing: -.027em;
}
.reader-metrics-hero > div:first-child p:not(.eyebrow) {
  max-width: 660px;
  margin: 0;
  color: #625c56;
  font: 15px/1.48 Georgia, "Times New Roman", serif;
}
.reader-metrics-hero .eyebrow { margin: 0; }
.reader-metrics-hero__aside {
  display: grid;
  justify-items: end;
  gap: 11px;
  flex: none;
}
.reader-metrics-hero__aside > small,
.reader-metrics-hero__aside > p {
  margin: 0;
  color: var(--reader-metrics-muted);
  font: 10px/1.4 Arial, sans-serif;
  text-align: right;
}

.reader-metrics-sample {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  border: 1px solid #c5949d;
  border-radius: 999px;
  padding: 7px 10px;
  background: #fbf0f0;
  color: #83152a;
  font: 900 9px/1.2 Arial, sans-serif;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.reader-metrics-sample::before {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.reader-metrics-period,
.reader-metrics-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: fit-content;
  border: 1px solid #cbc3ba;
  border-radius: 999px;
  padding: 3px;
  background: #f0ece6;
}
.reader-metrics-period { flex: none; }
.reader-metrics-period :is(button, a),
.reader-metrics-switch :is(button, a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  background: transparent;
  color: #5d5751;
  font: 900 10px/1.2 Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.reader-metrics-period :is(button, a):hover,
.reader-metrics-switch :is(button, a):hover { background: #e4ded6; color: var(--reader-metrics-ink); }
.reader-metrics-period :is(button, a):is([aria-pressed="true"], .is-active),
.reader-metrics-switch :is(button, a):is([aria-pressed="true"], .is-active) {
  background: var(--reader-metrics-ink);
  color: var(--reader-metrics-paper);
  box-shadow: 0 2px 6px rgb(23 21 19 / 12%);
}
.reader-metrics-period :is(button, a):focus-visible,
.reader-metrics-switch :is(button, a):focus-visible {
  outline: 2px solid var(--reader-metrics-red);
  outline-offset: 3px;
}

.reader-metrics-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--reader-metrics-rule);
}
.reader-metrics-kpi {
  display: grid;
  min-width: 0;
  min-height: 153px;
  align-content: center;
  gap: 7px;
  border-right: 1px solid var(--reader-metrics-rule);
  padding: 23px clamp(16px, 2.1vw, 31px);
}
.reader-metrics-kpi:last-child { border-right: 0; }
.reader-metrics-kpi > span,
.reader-metrics-kpi > p:first-child {
  margin: 0;
  color: var(--reader-metrics-muted);
  font: 900 9px/1.3 Arial, sans-serif;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.reader-metrics-kpi strong {
  font: 400 clamp(31px, 3vw, 45px)/1 Georgia, "Times New Roman", serif;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.reader-metrics-kpi small,
.reader-metrics-kpi > p:last-child {
  margin: 0;
  color: #777068;
  font: 11px/1.38 Arial, sans-serif;
}

.reader-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 32px;
}
.reader-metrics-grid > .reader-metrics-panel--wide { grid-column: 1 / -1; }
.reader-metrics-panel--trend { margin-top: 32px; }
.reader-metrics-panel--publishing { margin-top: 22px; }
.reader-metrics-panel {
  min-width: 0;
  border: 1px solid #d6cfc6;
  border-radius: 11px;
  padding: clamp(20px, 2.25vw, 31px);
  background: var(--reader-metrics-paper);
  box-shadow: 0 6px 20px rgb(38 30 23 / 3%);
}
.reader-metrics-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  border-bottom: 1px solid #e0dad3;
  padding-bottom: 19px;
  margin-bottom: 23px;
}
.reader-metrics-panel__head h3,
.reader-metrics-panel__head h2 {
  margin: 0 0 6px;
  font: 400 clamp(23px, 2.1vw, 30px)/1.1 Georgia, "Times New Roman", serif;
  letter-spacing: -.018em;
}
.reader-metrics-panel__head p.eyebrow {
  margin: 0 0 6px;
  color: var(--reader-metrics-red);
  font: 900 9px/1.3 Arial, sans-serif;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.reader-metrics-panel__head p {
  max-width: 570px;
  margin: 0;
  color: var(--reader-metrics-muted);
  font: 11px/1.5 Arial, sans-serif;
}
.reader-metrics-panel__head > small {
  color: var(--reader-metrics-muted);
  font: 900 9px/1.35 Arial, sans-serif;
  white-space: nowrap;
}

.reader-metrics-chart {
  min-width: 0;
  overflow: hidden;
  border-bottom: 1px solid #e8e3dd;
  margin: 0;
  padding-bottom: 12px;
}
.reader-metrics-chart svg {
  display: block;
  width: 100%;
  max-height: 330px;
  height: auto;
}
.reader-metrics-chart figcaption {
  margin-top: 12px;
  color: var(--reader-metrics-muted);
  font: 10px/1.45 Arial, sans-serif;
}
.reader-metrics-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 23px;
  align-items: center;
  margin-top: 17px;
  color: #59534e;
  font: 900 10px/1.3 Arial, sans-serif;
}
.reader-metrics-legend span { display: inline-flex; align-items: center; gap: 8px; }
.reader-metrics-legend i {
  width: 15px;
  height: 4px;
  flex: none;
  border-radius: 999px;
  background: var(--reader-metrics-red);
}
.reader-metrics-legend i.reader-metrics-legend__views,
.reader-metrics-legend i.reader-metrics-legend__standalone { background: #2e2a27; }

.reader-metrics-bars { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.reader-metrics-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px 14px;
  min-width: 0;
  font: 11px/1.35 Arial, sans-serif;
}
.reader-metrics-bar > :first-child {
  display: grid;
  gap: 3px;
  grid-column: 1 / -1;
  min-width: 0;
  color: #302b27;
  font-weight: 700;
}
.reader-metrics-bar > :first-child strong,
.reader-metrics-bar > :first-child small {
  overflow-wrap: anywhere;
  white-space: normal;
}
.reader-metrics-bar > :first-child strong { font-size: 12px; line-height: 1.3; }
.reader-metrics-bar > :first-child small { color: var(--reader-metrics-muted); font-size: 9px; font-weight: 400; }
.reader-metrics-bar > :last-child {
  grid-column: 2;
  grid-row: 2;
  color: #4c4640;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.reader-metrics-bar__track {
  display: block;
  grid-column: 1;
  grid-row: 2;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #eee9e3;
}
.reader-metrics-bar__fill {
  display: block;
  width: var(--value, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--reader-metrics-red);
}

.reader-metrics-publishing {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: clamp(5px, 1vw, 15px);
  min-height: 252px;
  border-bottom: 1px solid #bdb5ad;
  padding: 0 0 10px;
}
.reader-metrics-publishing > * {
  display: grid;
  min-width: 0;
  justify-items: center;
  align-items: end;
  gap: 10px;
  color: var(--reader-metrics-muted);
  font: 900 9px/1.3 Arial, sans-serif;
  text-align: center;
}
.reader-metrics-publishing__month { min-width: 0; }
.reader-metrics-publishing__label {
  color: var(--reader-metrics-muted);
  font: 900 9px/1.3 Arial, sans-serif;
  white-space: nowrap;
}
.reader-metrics-publishing__bar {
  display: flex;
  width: 100%;
  max-width: 43px;
  height: 212px;
  align-items: stretch;
  justify-content: flex-end;
  flex-direction: column;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
  background: #f1ede8;
}
.reader-metrics-publishing__issue,
.reader-metrics-publishing__standalone { display: block; width: 100%; flex: none; }
.reader-metrics-publishing__issue {
  height: var(--value, var(--issue-height, 0%));
  background: var(--reader-metrics-red);
}
.reader-metrics-publishing__standalone {
  height: var(--value, var(--standalone-height, 0%));
  background: #292622;
}

.reader-metrics-panel__footnote {
  margin: 17px 0 0;
  color: var(--reader-metrics-muted);
  font: 10px/1.5 Arial, sans-serif;
}

@media (max-width: 1100px) {
  .reader-metrics-hero { align-items: flex-start; flex-direction: column; }
  .reader-metrics-hero__aside { justify-items: start; }
  .reader-metrics-hero__aside > small,
  .reader-metrics-hero__aside > p { text-align: left; }
  .reader-metrics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reader-metrics-kpi:nth-child(2) { border-right: 0; }
  .reader-metrics-kpi:nth-child(-n + 2) { border-bottom: 1px solid var(--reader-metrics-rule); }
}

@media (max-width: 760px) {
  .reader-metrics-page { padding-right: 16px; padding-left: 16px; }
  .reader-metrics-hero { align-items: flex-start; flex-direction: column; gap: 22px; padding: 34px 0 27px; }
  .reader-metrics-hero__aside { justify-items: start; }
  .reader-metrics-hero__aside > small,
  .reader-metrics-hero__aside > p { text-align: left; }
  .reader-metrics-hero h2 { font-size: clamp(37px, 8vw, 50px); }
  .reader-metrics-grid { grid-template-columns: minmax(0, 1fr); gap: 17px; margin-top: 24px; }
  .reader-metrics-grid > .reader-metrics-panel--wide { grid-column: auto; }
  .reader-metrics-panel__head { flex-wrap: wrap; }
  .reader-metrics-chart { overflow-x: auto; }
  .reader-metrics-chart svg { min-width: 720px; }
  .reader-metrics-publishing { overflow-x: auto; grid-template-columns: repeat(12, minmax(24px, 1fr)); }
}

@media (max-width: 500px) {
  .reader-metrics-kpis { grid-template-columns: minmax(0, 1fr); }
  .reader-metrics-kpi { min-height: 114px; border-right: 0; border-bottom: 1px solid var(--reader-metrics-rule); padding: 18px 5px; }
  .reader-metrics-kpi:last-child { border-bottom: 0; }
  .reader-metrics-bar { gap: 7px 12px; }
  .reader-metrics-period :is(button, a) { padding: 0 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .reader-metrics-period :is(button, a),
  .reader-metrics-switch :is(button, a) { transition: none; }
}
.reader-metrics-empty {
  margin: 0;
  padding: 2rem 0;
  color: #756f69;
  font: 1rem/1.5 Georgia, serif;
}