/* The Performance Report (/performance-report).
   Loaded after /assets/home.css, which supplies the site header, phone
   menu, footer and the design tokens (--paper, --ink, --muted, --orange,
   --orange-text, --btn, --dark, --line). Everything here is scoped to a pr-
   class, so nothing reaches the rest of the site. */

.pr-site { --pr-cream: #F5F0E6; --pr-ink: #090909; }

.pr-skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--ink); color: var(--paper); padding: 12px 18px; font-family: var(--mono); font-size: 12px; }
.pr-skip:focus { left: 12px; top: 12px; color: var(--paper); }
.pr-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* banner */
.pr-banner { background: var(--pr-ink); }
.pr-banner img { width: 100%; height: auto; display: block; }
.pr-banner--small { max-width: 760px; margin: 48px auto 0; }
.pr-banner--text { text-align: center; padding: 64px 24px 58px; font-family: var(--display); font-size: clamp(46px, 9vw, 128px); line-height: .9; letter-spacing: .02em; text-transform: uppercase; color: var(--pr-cream); border-bottom: 4px solid var(--orange); }
.pr-banner--small.pr-banner--text { font-size: clamp(40px, 8vw, 76px); padding: 36px 20px 32px; }
.pr-bt-o { color: var(--orange); }
@media (max-width: 600px) {
  .pr-banner:not(.pr-banner--text) img { height: clamp(170px, 48vw, 260px); object-fit: cover; object-position: center; }
  .pr-banner--small { margin-top: 24px; }
}

/* layout */
.pr-main { max-width: 1180px; margin: 0 auto; padding: 64px 30px 108px; }
.pr-reading { max-width: 740px; }
@media (max-width: 720px) { .pr-main { padding: 44px 16px 78px; } }

.pr-intro { font-size: 20px; line-height: 1.6; color: var(--ink); max-width: 62ch; }

.pq .pr-section { padding: 0; margin-top: 88px; scroll-margin-top: 90px; }
.pq .pr-section h2 { font-size: clamp(40px, 5.6vw, 76px); }
.pr-section h2::before { content: ''; display: block; width: 32px; height: 3px; background: var(--orange); margin-bottom: 18px; }
.pq .pr-lead { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.pq .pr-empty { margin-top: 24px; font-family: var(--mono); font-size: 13px; letter-spacing: .1em; color: var(--muted); }

/* cards */
.pr-cards { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.pr-card { background: var(--paper-2); border: 1px solid var(--line); border-top: 3px solid var(--orange); padding: 34px 32px; display: flex; flex-direction: column; gap: 12px; }
.pq .pr-card-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-text); }
.pq .pr-card-title { font-size: 32px; letter-spacing: .02em; line-height: 1; }
.pr-card-title a { color: var(--ink); text-decoration: none; }
.pr-card-title a:hover { color: var(--orange-text); }
.pq .pr-card-text { font-size: 15.5px; color: var(--muted); }
.pq .pr-card-meta { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pq .pr-card-link { margin-top: auto; padding-top: 6px; }
.pr-card-link a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); text-underline-offset: 3px; }

.pq .pr-quiet { margin-top: 88px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.pr-quiet a, .pr-back a, .pr-built a, .pr-body a, .pr-sources a { color: var(--orange-text); text-underline-offset: 3px; }

/* reading pages */
.pr-head { margin-bottom: 36px; }
.pq .pr-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--orange-text); }
.pq .pr-head h1 { margin-top: 16px; font-size: clamp(46px, 7vw, 84px); line-height: .92; }
.pq .pr-dek { margin-top: 20px; font-size: 20px; line-height: 1.6; color: var(--muted); }
.pq .pr-meta { margin-top: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; line-height: 1.6; color: var(--muted); }

.pr-body { font-size: 18px; line-height: 1.75; }
.pq .pr-body p, .pr-body ol, .pr-body ul { margin-top: 20px; }
.pq .pr-body h2 { margin-top: 52px; font-size: clamp(32px, 4.2vw, 44px); line-height: .95; letter-spacing: .02em; }
.pr-body ol, .pr-body ul { padding-left: 1.4em; }
.pr-body li { margin-top: 12px; padding-left: 4px; }
.pr-body li::marker { color: var(--orange-text); font-family: var(--mono); }
.pr-body strong { font-weight: 700; }

.pr-bottomline { margin: 44px 0 0; background: var(--pr-cream); color: var(--pr-ink); border-left: 4px solid var(--orange); padding: 22px 26px; }
.pq .pr-bottomline p { margin: 0; font-size: 18px; line-height: 1.65; }

.pr-sources { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.pq .pr-sources h2 { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--orange-text); line-height: 1.6; }
.pq .pr-sources ul { list-style: none; margin-top: 14px; }
.pr-sources li { margin-top: 12px; font-size: 14px; line-height: 1.65; color: var(--muted); overflow-wrap: anywhere; }

.pr-built { margin-top: 48px; padding: 20px 22px; border: 1px solid var(--line); background: var(--paper-2); font-size: 15px; line-height: 1.65; color: var(--muted); }
.pq .pr-built p + p { margin-top: 8px; }
.pq .pr-built-label { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-text); }

.pr-prevnext { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); border: 1px solid var(--line); }
.pr-prevnext > * { background: var(--paper-2); padding: 18px 20px; display: block; text-decoration: none; }
.pr-next { text-align: right; }
.pr-pn-label { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-text); }
.pr-pn-title { display: block; margin-top: 6px; font-size: 15px; color: var(--ink); }
.pr-prevnext a:hover .pr-pn-title { color: var(--orange-text); }
@media (max-width: 600px) { .pr-prevnext { grid-template-columns: 1fr; } .pr-next { text-align: left; } .pr-prevnext > span:empty { display: none; } }

.pq .pr-back { margin-top: 40px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.pr-back a { display: inline-flex; align-items: center; min-height: 44px; }
.pq .pr-download { margin-top: 32px; }
.pr-button { display: inline-flex; align-items: center; min-height: 46px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; padding: 14px 24px; border: 1px solid var(--btn); background: var(--btn); color: #fff; }
.pr-button:hover { color: #fff; background: #A93E08; }

/* the issue: the newsletter's own look */
.pr-paper { background: var(--pr-cream); color: var(--pr-ink); border: 1px solid var(--line); padding: 48px clamp(20px, 6vw, 56px) 52px; font-size: 17px; line-height: 1.75; }
.pq .pr-paper p { margin-top: 18px; }
.pq .pr-paper > p:first-child { margin-top: 0; }
.pq .pr-paper .pr-kicker { margin-top: 48px; }
.pq .pr-paper h2 { margin-top: 10px; font-size: clamp(32px, 4.6vw, 44px); letter-spacing: .02em; line-height: 1; }
.pq .pr-paper > h2:not(.pr-kicker + h2) { margin-top: 48px; padding-top: 28px; border-top: 2px solid var(--orange); }
.pr-paper strong { font-weight: 700; }
.pr-paper a { color: var(--orange-text); text-underline-offset: 3px; }
.pr-paper .pr-cta a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.pr-grid { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; background: var(--orange); border: 2px solid var(--orange); }
.pr-grid-cell { background: var(--pr-cream); padding: 24px 22px; overflow-wrap: anywhere; }
.pq .pr-grid-cell h3 { font-size: 26px; letter-spacing: .02em; line-height: 1; }
.pq .pr-grid-cell p { margin-top: 10px; font-size: 15px; line-height: 1.6; }
.pr-grid-cell .pr-cta a { text-transform: none; letter-spacing: 0; font-size: 13px; }
@media (max-width: 640px) { .pr-grid { grid-template-columns: minmax(0, 1fr); } }
.pq .pr-signoff { margin-top: 40px; }
.pq .pr-signoff p { margin-top: 4px; font-family: var(--display); font-size: 26px; letter-spacing: .02em; line-height: 1.1; }
.pq .pr-signoff p + p { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; }
.pq .pr-paper #sources { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--orange-text); line-height: 1.6; }
.pq .pr-paper #sources + p { font-size: 14px; line-height: 1.65; }