/**
 * Text size widget.
 *
 * Sits at the bottom right of whichever banner heads the page -- the hero on
 * the front page, the sub banner everywhere else -- straddling its lower edge.
 * The row itself is zero-height and the pill is positioned out of it, so
 * adding the control moved nothing on any page.
 *
 * New rules elsewhere in the theme must write their sizes as
 * `font-size:calc(<size> * var(--fs,1))` or they will ignore the control.
 *
 * Nothing here uses --fs: the control keeps its own size at every setting, so
 * it stays where it is put and the buttons stay the same shape.
 */
.fs-tool{position:relative;z-index:6;height:0}
.fs-tool-in{
  position:absolute;right:var(--main-pad);bottom:-14px;
  display:flex;align-items:center;gap:8px;
  padding:6px 10px 6px 14px;
  background:#fff;border:1px solid rgba(12,46,78,.12);border-radius:999px;
  /* The pill sits over photography on the front page and over a pale band
     below it: the shadow is what keeps its edge readable on both. */
  box-shadow:0 2px 12px rgba(12,46,78,.16);
}
.fs-label{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--slate);
}
.fs-btn{
  width:30px;height:30px;padding:0;
  display:grid;place-items:center;
  border:1px solid transparent;border-radius:50%;
  background:transparent;color:var(--navy);
  font-family:inherit;font-weight:700;line-height:1;
  cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;
}
/* The three buttons are drawn at the sizes they set, so the control shows
   what it does without needing the percentages spelled out. */
.fs-btn[data-fs="1"]{font-size:13px}
.fs-btn[data-fs="1.1"]{font-size:15.5px}
.fs-btn[data-fs="1.2"]{font-size:18px}
.fs-btn:hover{background:var(--wash);border-color:rgba(12,46,78,.14)}
.fs-btn[aria-pressed="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}

/* Without JS the buttons would be decoration, so the boot script in the head
   is what reveals them. */
html:not(.fs-ready) .fs-tool{display:none}

@media (max-width:600px){
  .fs-label{display:none}
  .fs-tool-in{gap:4px;padding:5px 7px;bottom:-12px}
  .fs-btn{width:27px;height:27px}
}