:root {
  --tc-site-content-width: 1140px;
  --tc-site-gutter: 44px;
  --tc-site-gutters: 88px;
}

/*
 * The homepage's 1140px is its usable content width, with gutters outside it.
 * Some templates use global border-box sizing, so make that relationship
 * explicit wherever the shared page furniture appears.
 */
.aas-nav,
.aas-breadcrumb-inner,
.aas-split-header,
.aas-reading-layout--sidebar,
.aas-footer-inner,
.sot-nav,
.sot-breadcrumb-inner,
.sot-split-header,
.sot-reading-layout--sidebar,
.sot-footer-inner,
.upc-nav,
.upc-breadcrumb-inner,
.upc-split-header,
.upc-reading-layout--sidebar,
.upc-footer-inner,
body > div > div[style*="position:sticky"] > div[style*="max-width:1140px"] {
  box-sizing: content-box;
  max-width: var(--tc-site-content-width);
}

body > div > div[style*="position:sticky"] > div:first-child > div:last-child a[href$="/writing/"] {
  --tc-nav-line: #2e8b6e;
  --tc-nav-focus: #2e8b6e;
}

body > div > div[style*="position:sticky"] > div:first-child > div:last-child a[href$="/about/"] {
  --tc-nav-line: #8e74c8;
  --tc-nav-focus: #8e74c8;
}

.aas-media {
  --aas-content-width: min(var(--tc-site-content-width), calc(100vw - var(--tc-site-gutters)));
}

.sot-media {
  --sot-content-width: min(var(--tc-site-content-width), calc(100vw - var(--tc-site-gutters)));
}

.upc-media {
  --upc-content-width: min(var(--tc-site-content-width), calc(100vw - var(--tc-site-gutters)));
}

.ums-editorial-header__inner,
.ums-hn-experiments,
.pbg-gallery-header,
.pbg-media {
  width: min(var(--tc-site-content-width), calc(100vw - var(--tc-site-gutters)));
}

.pbg-history-inner {
  max-width: var(--tc-site-content-width);
}

.aas-brand,
.sot-brand,
.upc-brand,
body > div > div[style*="position:sticky"] > div:first-child > a {
  white-space: nowrap;
}

.aas-brand span,
.sot-brand span,
.upc-brand span,
.section-index-brand span,
body > div > div[style*="position:sticky"] > div:first-child > a > span {
  letter-spacing: 0 !important;
}

@media (max-width: 900px) {
  .aas-nav,
  .sot-nav,
  .upc-nav {
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    padding-right: var(--tc-site-gutter);
    padding-left: var(--tc-site-gutter);
  }

  .aas-brand,
  .sot-brand,
  .upc-brand {
    justify-self: start;
  }

  .aas-clock,
  .sot-clock,
  .upc-clock {
    justify-self: center;
  }

  .aas-nav-links,
  .sot-nav-links,
  .upc-nav-links {
    flex-wrap: nowrap;
    gap: 24px;
    justify-self: end;
  }

  .aas-breadcrumb-inner,
  .sot-breadcrumb-inner,
  .upc-breadcrumb-inner {
    padding-right: var(--tc-site-gutter);
    padding-left: var(--tc-site-gutter);
  }
}

@media (max-width: 700px) {
  :root {
    --tc-site-gutter: 20px;
    --tc-site-gutters: 40px;
  }

  body > div > div[style*="position:sticky"] > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px 20px !important;
  }

  body > div > div[style*="position:sticky"] > div:first-child > a {
    justify-self: start !important;
  }

  body > div > div[style*="position:sticky"] > div:first-child > div:nth-child(2) {
    display: none !important;
  }

  body > div > div[style*="position:sticky"] > div:first-child > div:last-child {
    justify-self: start !important;
    gap: 20px !important;
    font-size: 13px !important;
    flex-wrap: wrap !important;
  }

  body > div > div[style*="position:sticky"] > div[style*="max-width:1140px"]:not(:first-child) {
    padding-right: var(--tc-site-gutter) !important;
    padding-left: var(--tc-site-gutter) !important;
  }

  .aas-nav,
  .sot-nav,
  .upc-nav {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px var(--tc-site-gutter);
  }

  .aas-clock,
  .sot-clock,
  .upc-clock {
    display: none;
  }

  .aas-nav-links,
  .sot-nav-links,
  .upc-nav-links {
    flex-wrap: wrap;
    gap: 20px;
    justify-self: start;
    font-size: 13px;
  }

  .aas-breadcrumb-inner,
  .sot-breadcrumb-inner,
  .upc-breadcrumb-inner {
    padding-right: var(--tc-site-gutter);
    padding-left: var(--tc-site-gutter);
  }

  [data-stuckborder] {
    top: 80px !important;
  }
}