/* Shared reading scale and callout treatment for the site's long-form pages. */
body.site-readable {
  --ink: #fff;
  --sub: #fff;
  --faint: #fff;
  color: #fff;
  font-size: 19px;
}

/* Keep every long-form page on the same compact, horizontally scrollable masthead. */
body.site-readable .topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  width: min(100%, 1080px);
  min-width: 0;
  margin: 0 auto;
  padding: .55rem 0 .7rem;
  margin-bottom: 1rem;
  flex-wrap: nowrap;
}

body.site-readable .topbar::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, #f0a93a 0%, #8d6416 32%, #21262d 78%);
  pointer-events: none;
}

body.site-readable .topbar-brand {
  flex: 0 0 auto;
  color: #fff;
  font-family: var(--f-sans, "Archivo", Arial, sans-serif);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .045em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

body.site-readable .topbar-brand:hover,
body.site-readable .topbar-brand:focus-visible { color: #f0a93a; }

body.site-readable .pagenav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: .95rem;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: .35rem 0 .5rem;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  scrollbar-color: #8d6416 transparent;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

body.site-readable .pagenav::-webkit-scrollbar { height: 3px; }
body.site-readable .pagenav::-webkit-scrollbar-thumb { background: #8d6416; }
body.site-readable .pagenav > a,
body.site-readable .pagenav > span {
  flex: 0 0 auto;
  margin: 0;
  padding: .25rem 0;
}

body.site-readable .langbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .65rem;
  padding: 0;
  white-space: nowrap;
}

body.site-readable .langbar button {
  margin: 0;
  line-height: 1.2;
}

body.site-readable .langbar button[aria-pressed="true"] {
  color: #f0a93a !important;
  font-weight: 600;
}

body.site-readable .mast {
  display: flow-root;
  padding: 1.8rem 0 0;
  border: 0;
  background-image: linear-gradient(90deg, #f0a93a 0%, #8d6416 34%, #21262d 78%);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 100%;
}

body.site-readable .mast::after { content: none !important; }

body.site-readable .mast:has(> .reading-map) {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

body.site-readable .mast:has(> .reading-map) > .mast-top { grid-column: 1 / -1; }
body.site-readable .mast:has(> .reading-map) > .mast-copy { grid-column: 1; grid-row: 2; min-width: 0; }
body.site-readable .mast:has(> .reading-map) > .reading-map {
  grid-column: 2;
  grid-row: 2;
  align-self: stretch;
  min-width: 0;
  margin: 2rem 0 1.5rem;
  padding: .15rem 0 .2rem 1.1rem;
  border: 0;
  border-left: 1px solid #8d6416;
  background: none;
}
body.site-readable .mast:has(> .reading-map) > :not(.mast-top):not(.mast-copy):not(.reading-map) {
  grid-column: 1 / -1;
}
body.site-readable .mast:has(> .reading-map) .reading-map ol {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .2rem .5rem !important;
  background: transparent !important;
}
body.site-readable .mast:has(> .reading-map) .reading-map li { background: transparent; }
body.site-readable .mast:has(> .reading-map) .reading-map .n {
  display: block;
  margin-bottom: .15rem;
}
body.site-readable .mast:has(> .reading-map) .reading-map a {
  display: block;
  height: 100%;
  padding: .4rem .45rem;
  border-bottom: 1px solid rgba(141, 100, 22, .45);
}
body.site-readable .mast:has(> .reading-map) .reading-map .t { font-size: .88rem; line-height: 1.3; }
body.site-readable .mast:has(> .reading-map) .reading-map small { display: none; }
body.site-readable .mast:has(> .reading-map) .reading-map .intro {
  display: block;
  margin-bottom: .5rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid #8d6416;
}
body.site-readable .mast:has(> .reading-map) .reading-map .intro p { margin-top: .3rem; }

body.site-readable .mast-top {
  padding-bottom: .65rem;
  border-bottom: 0;
  border-top: 0;
}

body.site-readable h2 {
  color: #fff;
  font-family: var(--f-sans, "Archivo", Arial, sans-serif);
  font-size: clamp(1.18rem, 1.8vw, 1.38rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.28;
}

body.site-readable h1 {
  font-size: clamp(1.9rem, 3.1vw, 2.4rem);
  font-weight: 700;
  line-height: 1.08;
  max-width: 26ch;
  margin-top: 1.7rem;
}

body.site-readable .lede {
  font-size: 1.16rem;
  line-height: 1.58;
}

body.site-readable .lede2,
body.site-readable .lede-note {
  font-size: 1.06rem;
  line-height: 1.58;
}

body.site-readable h3 {
  color: #fff;
  font-family: var(--f-sans, "Archivo", Arial, sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
}

body.site-readable :where(
  .small, small, figcaption, .cap, .units, .note p, .eyebrow, .tag,
  .mast-top, .pagenav > a, .pagenav > span, .figs .k, .figs .n,
  .reading-map .n, .reading-map .t, .reading-map small, .snum, .stitle,
  .tickers > div, .subject .lbl, .lbl, .band .cap
) {
  color: #fff;
  font-size: .96rem;
  line-height: 1.5;
}

body.site-readable .pagenav > a,
body.site-readable .pagenav > span {
  font-size: .82rem;
  letter-spacing: .08em;
}

body.site-readable .mast-top,
body.site-readable .eyebrow,
body.site-readable .snum,
body.site-readable .stitle,
body.site-readable .subject .lbl,
body.site-readable .lbl {
  font-family: var(--f-sans, "Archivo", Arial, sans-serif);
}

body.site-readable .small,
body.site-readable small,
body.site-readable figcaption,
body.site-readable .cap,
body.site-readable .units,
body.site-readable .note p {
  font-size: 1.08rem;
  line-height: 1.58;
}

body.site-readable .small,
body.site-readable figcaption,
body.site-readable .cap,
body.site-readable .units { font-size: 1rem; }

body.site-readable .lede strong,
body.site-readable .lede b,
body.site-readable .lede-note strong,
body.site-readable .subject p strong,
body.site-readable .subject p b,
body.site-readable .note strong,
body.site-readable .note b {
  color: #ffd36f;
  font-weight: 700;
}

body.site-readable .note {
  padding: .8rem 1rem .8rem 1.15rem;
  border: 1px solid #8d6416;
  border-left: 4px solid #f0a93a;
  background: linear-gradient(110deg, rgba(141, 100, 22, .2), rgba(30, 23, 16, .48));
}

body.site-readable .lede-note {
  padding: .85rem 1rem .85rem 1.1rem;
  border: 1px solid #8d6416;
  border-left: 4px solid #f0a93a;
  background: linear-gradient(110deg, rgba(141, 100, 22, .2), rgba(30, 23, 16, .48));
}

body.site-readable .tw th,
body.site-readable .tw td,
body.site-readable table th,
body.site-readable table td {
  color: #fff;
  font-size: .92rem;
}

body.site-readable .site-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  margin: 1.3rem 0 2rem;
}

body.site-readable .site-proof {
  min-width: 0;
  padding: 1.1rem 1.25rem;
  border-radius: 2px;
}

body.site-readable .site-proof h2 {
  margin: 0 0 .65rem;
  font-size: .95rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

body.site-readable .site-proof p,
body.site-readable .site-proof li {
  color: #fff;
  font-size: 1.08rem;
  line-height: 1.5;
}

body.site-readable .site-proof p + p { margin-top: .55rem; }
body.site-readable .site-proof ul { margin: 0; padding-left: 1.15rem; }
body.site-readable .site-proof li + li { margin-top: .45rem; }
body.site-readable .site-proof strong { color: #ffd36f; font-weight: 700; }

body.site-readable .site-proof--environment {
  border: 1px solid #eab308;
  background: linear-gradient(135deg, #1d1811, #171c24 88%);
  box-shadow: inset 4px 0 0 #eab308;
}

body.site-readable .site-proof--environment h2 { color: #f0a93a; }

body.site-readable .site-proof--technical {
  border: 1px solid #bd8621;
  border-left: 4px solid #ffd36f;
  background: linear-gradient(135deg, #75500f, #312515 92%);
}

body.site-readable .site-proof--technical h2 { color: #fff0bb; }

body.site-readable .scroll-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1);
}

body.site-readable .scroll-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 760px) {
  body.site-readable .site-proof-grid { grid-template-columns: 1fr; }
  body.site-readable .topbar { gap: .55rem; }
  body.site-readable .topbar-brand { font-size: .68rem; }
  body.site-readable .pagenav { gap: .8rem; }
  body.site-readable .mast:has(> .reading-map) { display: flow-root; }
  body.site-readable .mast:has(> .reading-map) > .mast-copy,
  body.site-readable .mast:has(> .reading-map) > .reading-map { grid-column: auto; grid-row: auto; }
  body.site-readable .mast:has(> .reading-map) > .reading-map {
    margin: 1.2rem 0 1.5rem;
    padding: .85rem 0 .2rem;
    border-left: 0;
    border-top: 1px solid #8d6416;
  }
  body.site-readable .mast:has(> .reading-map) .reading-map ol { grid-template-columns: 1fr !important; }
  body.site-readable .mast:has(> .reading-map) .reading-map small { display: block; }
}

@media (max-width: 460px) {
  body.site-readable { padding-left: .85rem; padding-right: .85rem; }
  body.site-readable .topbar { gap: .45rem; }
  body.site-readable .topbar-brand { font-size: .62rem; letter-spacing: .025em; }
  body.site-readable .pagenav { gap: .7rem; }
  body.site-readable .langbar { gap: .45rem; }
}

@media (prefers-reduced-motion: reduce) {
  body.site-readable .scroll-reveal,
  body.site-readable .scroll-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  body.site-readable *, body.site-readable *::before, body.site-readable *::after {
    scroll-behavior: auto !important;
  }
}