/* THE RATE. The only chart on this property that argues with the front door,
   so it is drawn plainly: no gradient, no easing, nothing that would make a
   spike look designed rather than measured. */
.rate{padding:26px 30px 30px;max-width:820px}
.rt-head h1{margin:2px 0 12px;font-family:var(--face-record);font-size:var(--t-h1);font-weight:400;line-height:1.12;letter-spacing:-.015em}
.rt-lede{margin:0 0 22px;font-family:var(--face-record);font-size:var(--t-lead);line-height:1.55;max-width:60ch}

.rt-nums{display:flex;flex-wrap:wrap;gap:8px 34px;margin:0 0 10px;padding:14px 0;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.rt-nums div{display:grid;gap:3px}
.rt-nums dt{margin:0;font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;opacity:.62}
.rt-nums dd{margin:0;font-family:var(--face-evidence);font-size:var(--t-h2);line-height:1;font-variant-numeric:tabular-nums}
.rt-nums dd small{font-family:var(--face-chrome);font-size:var(--t-fine);opacity:.6;margin-left:6px}
.rt-nums .is-peak{color:#a8442c}
.rt-spread{margin:0 0 24px;font-size:var(--t-body);opacity:.78}

.rt-chart h2{margin:0 0 14px;font-size:var(--t-lead);font-weight:400}
.rt-bars{display:flex;align-items:flex-end;gap:14px;height:190px}
.rt-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0}
.rt-stack{display:flex;flex-direction:column;justify-content:flex-end;height:100%;border-bottom:1px solid color-mix(in srgb,currentColor 26%,transparent)}
/* The bands live in a wrapper sized to the column's own total, so the peak
   marker hugs the bars. Outlining .rt-stack drew a full-height box around
   August and made a 60 commit month look like the tallest on the chart. */
.rt-fill{display:flex;flex-direction:column;width:100%}
.rt-fill span{display:block;min-height:0}
/* One channel, one meaning. The first draft filled the peak month's refused
   band in red, which made a colour mean "refused" in four columns and "this
   is the peak" in the fifth. The emphasis belongs on the number, which is
   what the peak is a peak of. */
.rt-un{display:block;background:color-mix(in srgb,currentColor 9%,transparent)}
.rt-ref{display:block;background:color-mix(in srgb,currentColor 30%,transparent)}
.rt-kept{display:block;background:#1b6ef3}
.rt-col.is-peak .rt-fill{outline:1.5px solid #a8442c;outline-offset:2px;border-radius:2px}
.rt-rate{margin:7px 0 1px;font-family:var(--face-evidence);font-size:var(--t-fine);font-variant-numeric:tabular-nums;text-align:center}
.rt-col.is-peak .rt-rate{color:#a8442c;font-weight:600}
.rt-month{margin:0;font-size:var(--t-micro);text-align:center;opacity:.6}
.rt-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:14px 0 0;font-size:var(--t-fine);opacity:.7}
.rt-swatch{width:11px;height:11px;border-radius:2px;display:inline-block}
.rt-swatch-kept{background:#1b6ef3}
.rt-swatch-ref{background:color-mix(in srgb,currentColor 30%,transparent);margin-left:14px}
.rt-swatch-un{background:color-mix(in srgb,currentColor 9%,transparent);border:1px solid color-mix(in srgb,currentColor 18%,transparent);margin-left:14px}
.rt-key-rate{flex-basis:100%;opacity:.82}

.rt-say{margin:24px 0 0;font-family:var(--face-record);font-size:var(--t-lead);line-height:1.5}
.rt-open{margin:20px 0 0;padding:18px 0 0;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.rt-open h3{margin:0 0 7px;font-size:var(--t-body);font-weight:600}
.rt-note{margin:0 0 14px;font-size:var(--t-fine);line-height:1.55;opacity:.8}
.rt-reasons{margin:0;padding:0;list-style:none;display:grid;gap:10px;max-height:330px;overflow-y:auto}
.rt-reasons li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;font-size:var(--t-fine);line-height:1.5}
.rt-reasons code{font-family:var(--face-evidence);font-size:var(--t-micro);opacity:.6}
.rt-why{margin:20px 0 0;font-size:var(--t-fine);line-height:1.6;opacity:.78;max-width:66ch}
.rt-foot{margin:22px 0 0;padding-top:12px;border-top:1px solid color-mix(in srgb,currentColor 12%,transparent);font-size:var(--t-micro);opacity:.62}

@media (max-width:560px){
  .rate{padding:20px 18px 24px}
  .rt-bars{gap:7px;height:150px}
  .rt-month{font-size:var(--t-micro)}
}