/* Text size picker (text-size.js). Size 1 is the original page; 2 and 3 scale the whole page (text and the boxes around it). */
html[data-text-size="2"]{zoom:1.125}
html[data-text-size="3"]{zoom:1.25}
/* The header (with this picker) keeps its normal size, so it fits on a phone at every size. */
html[data-text-size="2"] .site-header{zoom:.8889}
html[data-text-size="3"] .site-header{zoom:.8}
.text-size-switcher{display:flex;align-items:center;padding:3px;border:1px solid var(--line);background:rgba(255,253,248,.8);border-radius:999px}
.text-size-switcher button{width:30px;height:30px;border:0;background:transparent;border-radius:999px;font-family:var(--font-body);font-weight:800;line-height:1;color:var(--muted);cursor:pointer;padding:0}
.text-size-switcher button[data-text-size="1"]{font-size:11px}
.text-size-switcher button[data-text-size="2"]{font-size:14px}
.text-size-switcher button[data-text-size="3"]{font-size:17px}
.text-size-switcher button[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:0 2px 8px rgba(24,34,28,.18)}
.text-size-switcher button:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
/* Phones: one button that shows the current size; tapping it goes to the next size (text-size.js). */
@media(max-width:760px){.text-size-switcher{padding:2px}.text-size-switcher button{width:30px;height:28px}.text-size-switcher button[aria-pressed="false"]{display:none}}
@media print{html[data-text-size]{zoom:1}.text-size-switcher{display:none}}