/* ==========================================================================
   Officelovin' facelift: tokens + base
   Layered on top of officelovin-v3/static/css/style.css (same selectors,
   loaded later), so anything not restyled here keeps its original look.
   ========================================================================== */

:root {
  --ol-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ol-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ol-bg: #f5f5f7;
  --ol-surface: #fff;
  --ol-fill: #f5f5f7;
  --ol-fill-2: #e8e8ed;
  --ol-text: #1d1d1f;
  --ol-text-2: #6e6e73;
  --ol-text-3: #86868b;
  --ol-hairline: #d2d2d7;
  --ol-separator: rgba(0, 0, 0, .08);

  /* The original's light sky blue (#66b3e5), deepened just enough for small text (3.1:1) */
  --ol-accent: #3a9ad9;
  --ol-accent-hover: #2785c6;
  --ol-accent-tint: color-mix(in srgb, var(--ol-accent) 8%, transparent);
  --ol-focus-halo: color-mix(in srgb, var(--ol-accent) 24%, transparent);

  /* logo palette */
  --ol-blue: #0093bf;
  --ol-cyan: #05bcd9;
  --ol-orange: #f15c26;
  --ol-yellow: #f1bc1b;
  --ol-green: #56b055;

  --ol-radius-xs: 6px;
  --ol-radius-sm: 8px;
  --ol-radius: 12px;
  --ol-radius-lg: 16px;
  --ol-radius-pill: 980px;

  --ol-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  --ol-shadow-hover: 0 4px 12px rgba(0, 0, 0, .04), 0 18px 40px rgba(0, 0, 0, .08);
  --ol-shadow-pop: 0 10px 30px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .04);

  --ol-ease: cubic-bezier(.25, .1, .25, 1);
  --ol-ease-out: cubic-bezier(.22, 1, .36, 1);
  --ol-dur: .35s;

  --ol-fs-caption: 12px;
  --ol-fs-footnote: 13px;
  --ol-fs-small: 14px;
  --ol-fs-body: 17px;
  --ol-fs-lead: 19px;
  --ol-fs-h3: 21px;
  --ol-fs-h2: 28px;
  --ol-fs-h1: 40px;

  --ol-track-body: -.011em;
  --ol-track-head: -.012em;
  --ol-track-display: -.018em;
  --ol-track-caps: .06em;

  --ol-header-h: 69px; /* the original bar height */
}

/* One typeface everywhere. !important because the parent sets Lato, Montserrat,
   Merriweather, Poppins and Open Sans on ~30 selectors and their webfonts are
   no longer loaded (a missed selector would fall back to serif). */
body *:not(pre):not(code):not(kbd):not(samp) {
  font-family: var(--ol-font) !important;
}

pre, code, kbd, samp {
  font-family: var(--ol-mono);
}

html {
  font: 400 16px/1.5 var(--ol-font);
  color: var(--ol-text-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--ol-bg);
  letter-spacing: var(--ol-track-body);
}

::selection {
  background: color-mix(in srgb, var(--ol-accent) 20%, transparent);
}

a {
  color: var(--ol-accent);
  transition: color .2s var(--ol-ease);
}

a:hover,
.no-touchevents a:hover {
  color: var(--ol-accent-hover);
}

/* a:focus-visible: the parent's a:focus { outline: 0 } outranks a bare :focus-visible */
:focus-visible,
a:focus-visible {
  outline: 2px solid var(--ol-accent);
  outline-offset: 2px;
}

a:not([class]):focus-visible,
.m-mega__link:focus-visible {
  border-radius: 4px;
}

.widget-articles__link:focus-visible {
  border-radius: var(--ol-radius-sm);
}

.header .m-main__link:focus-visible {
  border-radius: var(--ol-radius-xs);
}

/* The image link's ring would be clipped by .c-articles__img and painted over
   by the positioned img, so the card carries it */
.c-articles__item:has(.c-articles__img a:focus-visible) {
  outline: 2px solid var(--ol-accent);
  outline-offset: 2px;
}

/* The parent's overflow:hidden here only cut off the title link's ring;
   dotdotdot truncates the link itself */
.c-articles--designers .c-articles__name {
  overflow: visible;
}

/* The desktop bar is exactly link height: an outer ring would lose its top edge */
@media (min-width: 750px) {
  .header .m-main__link:focus-visible {
    outline-offset: -3px;
  }
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  color: var(--ol-text);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: pretty;
  letter-spacing: var(--ol-track-head);
  text-transform: none;
}

h1, .h1 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: var(--ol-track-display);
  line-height: 1.1;
}

h2, .h2 { font-size: 24px; }
h3, .h3 { font-size: 19px; }
h4, .h4, h5, .h5 { font-size: 17px; }
h6, .h6 { font-size: 14px; }

hr {
  border-top-color: var(--ol-separator);
}

@media (min-width: 750px) {
  .main {
    padding-top: 20px;
  }

  /* fixed 20px gutter like the tile rows (the parent's is 1.75%: 13-20px) */
  .grid-main .size--content {
    width: calc(100% - 26.3158% - 20px);
  }
}

.img--lazy {
  background: var(--ol-fill);
}

/* Section heading ("Newest Offices", "You might also like", ...) */
.b-title {
  margin: 0 0 20px;
  color: var(--ol-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--ol-track-head);
  text-transform: none;
}

.b-title span:after {
  display: none;
}

.b-title--archive:first-child {
  margin-top: 4px;
  margin-bottom: 20px;
}

@media (min-width: 750px) {
  h1, .h1 { font-size: var(--ol-fs-h1); }
  h2, .h2 { font-size: var(--ol-fs-h2); }
  .b-title { font-size: 22px; margin-bottom: 20px; }
  /* cap line level with the top of the first sidebar card */
  .b-title--archive:first-child { margin-top: -4px; }
}

/* Generic controls */
.btn {
  border-radius: var(--ol-radius-pill);
}

.btn .btn__text {
  padding: 10px 22px;
  border: 0;
  border-radius: var(--ol-radius-pill);
  background: var(--ol-accent);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  transition: background .2s var(--ol-ease), transform .2s var(--ol-ease);
}

.no-touchevents .btn:hover {
  text-decoration: none;
}

.btn:hover .btn__text,
.no-touchevents .btn:hover .btn__text {
  background: var(--ol-accent-hover);
}

.inp-search, .inp-select, .inp-text {
  border: 1px solid var(--ol-hairline);
  border-radius: var(--ol-radius-sm);
  padding: 10px 14px;
  color: var(--ol-text);
  font-size: 16px;
  line-height: 22px;
  transition: border-color .2s var(--ol-ease), box-shadow .2s var(--ol-ease);
}

.inp-search:focus, .inp-select:focus, .inp-text:focus {
  border-color: var(--ol-accent);
  box-shadow: 0 0 0 4px var(--ol-focus-halo);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ==========================================================================
   Header: sticky frosted bar, main nav, mega menus, social, mobile sheet,
   search overlay
   ========================================================================== */

:root {
  --hdr-h: 48px;
  --hdr-blur: saturate(180%) blur(20px);
  --hdr-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.25' cy='10.25' r='7.25'/%3E%3Cpath d='m15.75 15.75 6 6'/%3E%3C/svg%3E");
  --hdr-i-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5 5 19'/%3E%3C/svg%3E");
}

html {
  scroll-padding-top: var(--hdr-h);
}

/* Bar
   ========================================================================== */

/* The header is the containing block for the mega panels and the mobile sheet,
   so they can span the full viewport width instead of the 1170px row. */
.header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 90;
  background: none;
  box-shadow: none;
}

/* Glass lives on a pseudo-element: backdrop-filter on .header itself would
   make it a backdrop root and the mega panel could no longer blur the page. */
.header::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-bottom: 1px solid var(--ol-separator);
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: var(--hdr-blur);
  backdrop-filter: var(--hdr-blur);
  transition: background-color .25s var(--ol-ease), border-color .25s var(--ol-ease);
}

.header > .row-main,
.header__inner {
  position: static;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--hdr-h);
  padding: 0;
}

.header__logo {
  margin: 0;
  padding: 0;
  line-height: 0;
}

.header__logo a {
  display: block;
}

.header__logo img {
  width: 175px;
  height: auto;
}

@media screen and (min-width: 601px) and (max-width: 782px) {
  .admin-bar .header { top: 46px; }
}

@media screen and (min-width: 783px) {
  .admin-bar .header { top: 32px; }
}

/* Hamburger + search icon (mobile)
   ========================================================================== */

.menu-toggle,
.search-toggle {
  position: absolute;
  top: calc((var(--hdr-h) - 44px) / 2);
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}

.menu-toggle {
  left: 2px;
  display: flex;
}

.search-toggle {
  right: 2px;
  display: flex;
}

/* Inset: the default outer ring would run off the viewport edges, or for the
   search submit be clipped by the form's overflow:hidden */
.menu-toggle:focus-visible,
.search-toggle:focus-visible,
.b-search__btn:focus-visible {
  border-radius: 50%;
  outline-offset: -4px;
}

/* Two thin lines that cross into an X; the middle pair from the parent
   markup is kept hidden. */
.menu-toggle span {
  width: 18px;
  height: 14px;
}

.menu-toggle i {
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 1px;
  background: var(--ol-text);
  transition: top .3s var(--ol-ease-out), transform .3s var(--ol-ease-out);
}

.menu-toggle i:nth-child(1) { top: 3px; }
.menu-toggle i:nth-child(4) { top: 9px; }

.menu-toggle i:nth-child(2),
.menu-toggle i:nth-child(3) {
  top: 6px;
  opacity: 0;
}

.menu-open .menu-toggle i:nth-child(1),
.menu-open .menu-toggle i:nth-child(4) {
  top: 6px;
  left: 0;
  width: 100%;
}

.menu-open .menu-toggle i:nth-child(1) { transform: rotate(45deg); }
.menu-open .menu-toggle i:nth-child(4) { transform: rotate(-45deg); }

.menu-open .menu-toggle i:nth-child(2),
.menu-open .menu-toggle i:nth-child(3) {
  transform: none;
}

.header .search-toggle {
  color: var(--ol-text);
}

.search-toggle .icon-svg {
  width: 18px;
}

/* Thin-stroke glyphs drawn as masks in place of the parent's heavy sprite
   icons (the sprite's search icon also has a baked-in gray fill). */
.search-toggle .icon-svg,
.b-search__btn .icon-svg,
.b-search__close .icon-svg {
  background: currentColor;
  -webkit-mask: var(--hdr-i-search) center / contain no-repeat;
  mask: var(--hdr-i-search) center / contain no-repeat;
}

.b-search__close .icon-svg {
  -webkit-mask-image: var(--hdr-i-cross);
  mask-image: var(--hdr-i-cross);
}

.search-toggle .icon-svg__svg,
.b-search__btn .icon-svg__svg,
.b-search__close .icon-svg__svg {
  display: none;
}

/* Main nav, shared
   ========================================================================== */

.m-main {
  margin: 0;
  padding: 0;
  font-weight: 400;
}

.m-main__list {
  padding: 0;
}

.m-main__item {
  border-bottom: 0;
}

.m-main .m-main__link {
  color: var(--ol-text);
  text-decoration: none;
}

.no-touchevents .m-main__item.menu-item-has-children:hover > .m-main__link {
  box-shadow: none;
}

/* Mega menu, shared
   ========================================================================== */

.m-mega {
  margin: 0;
  border: 0;
  background: none;
}

.m-mega__title {
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  color: var(--ol-text-2);
  font-size: var(--ol-fs-caption);
  font-weight: 600;
  line-height: 16px;
  letter-spacing: var(--ol-track-caps);
  text-transform: uppercase;
}

.m-mega .m-mega__link {
  color: var(--ol-text);
  text-decoration: none;
}

.no-touchevents .m-mega__link:hover {
  background: none;
  color: var(--ol-accent);
}

.m-mega__btn {
  border-top: 0;
}

.m-mega__btn a {
  color: var(--ol-accent);
  font-weight: 500;
  text-transform: none;
}

.m-mega__btn a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 0 7px;
  border: solid currentColor;
  border-width: 1.5px 1.5px 0 0;
  vertical-align: 1px;
  transform: rotate(45deg);
}

.no-touchevents .m-mega__btn a:hover {
  color: var(--ol-accent-hover);
}

/* Social, shared: the brand-colored tiles go quiet and monochrome */
.m-social__list {
  display: flex;
  margin: 0;
}

.m-social__item {
  margin: 0;
}

.m-social__link {
  overflow: hidden;
}

/* Per-icon brightness brings every desaturated tile to text-3 gray (3:1 on
   the bar and under the white glyph). */
.m-social .icon-svg {
  filter: grayscale(1) brightness(var(--hdr-soc, 1));
  transition: filter .25s var(--ol-ease);
}

.m-social .icon-svg--fb { --hdr-soc: 1.5; }
.m-social .icon-svg--ln { --hdr-soc: 1.35; }
.m-social .icon-svg--pin { --hdr-soc: 1.69; }
.m-social .icon-svg--in { filter: none; }

/* Twitter's tile starts lighter than the target, and brightness below 1 alone
   would gray its white glyph; contrast then stretches the glyph back to white. */
.m-social .icon-svg--tw { filter: grayscale(1) brightness(.77) contrast(2.1); }

/* Instagram is inline SVG with gradient fills that desaturate unevenly, so its
   tile gets a flat gray until hovered. */
.m-social__link:not(:hover) .icon-svg--in path[fill^="url"] {
  fill: var(--ol-text-3);
}

.m-social__link:not(:hover) .icon-svg--in path[fill="url(#b)"] {
  fill: none;
}

.no-touchevents .m-social__link:hover {
  opacity: 1;
}

.no-touchevents .m-social__link:hover .icon-svg {
  filter: none;
}

/* Mobile: compact bar + full-height sheet
   ========================================================================== */

@media (max-width: 749px) {
  body.menu-open {
    overflow: hidden;
  }

  .menu-open .header::before {
    border-bottom-color: transparent;
    background: var(--ol-surface);
  }

  .menu-open .header__menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 10;
    height: calc(100vh - var(--hdr-h));
    height: calc(100dvh - var(--hdr-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 15px 48px;
    border: 0;
    background: var(--ol-surface);
    animation: ol-hdr-sheet .35s var(--ol-ease-out) both;
  }

  .m-main__item {
    border-bottom: 1px solid var(--ol-separator);
  }

  .m-main .m-main__link {
    padding: 13px 0;
    font-size: var(--ol-fs-body);
    font-weight: 500;
    line-height: 22px;
    letter-spacing: var(--ol-track-body);
  }

  .m-mega {
    padding: 4px 0 20px 16px;
  }

  .m-mega .row-main {
    padding: 0;
  }

  .m-mega__col {
    padding: 12px 0 4px;
  }

  .m-mega .m-mega__link {
    padding: 6px 0;
    font-size: var(--ol-fs-body);
    line-height: 22px;
  }

  .m-mega__btn {
    margin: 8px 0 0;
    padding: 0;
    text-align: left;
  }

  .m-mega__btn a {
    display: inline-block;
    padding: 6px 0;
    font-size: var(--ol-fs-body);
  }

  .m-social {
    padding: 20px 0 0;
  }

  .m-social__list {
    justify-content: center;
    gap: 12px;
  }

  .m-social__link,
  .m-social .icon-svg {
    width: 28px;
    height: 28px;
  }

  .m-social__link {
    border-radius: 8px;
  }
}

@keyframes ol-hdr-sheet {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* Desktop: logo, nav, social in one 56px row; mega as a full-width panel
   ========================================================================== */

@media (min-width: 750px) {
  :root {
    --hdr-h: var(--ol-header-h);
  }

  .menu-toggle,
  .search-toggle {
    display: none;
  }

  .header__inner {
    justify-content: flex-start;
    min-height: 0;
    padding: 0;
  }

  .header__logo {
    flex: none;
    margin: 0 16px 0 0;
    padding: 0;
  }

  .header__logo:before {
    display: none;
  }

  /* .menu-open survives rotating a phone to landscape */
  .header__menu,
  .menu-open .header__menu {
    position: static;
    display: flex;
    flex: 1;
    align-items: center;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
  }

  .m-main {
    height: 100%;
    padding: 0;
  }

  .m-main__list {
    display: flex;
    height: 100%;
  }

  .m-main .m-main__link {
    padding: 0 6px;
    color: rgba(29, 29, 31, .8);
    font-size: 14px;
    line-height: var(--hdr-h);
    white-space: nowrap;
    transition: color .2s var(--ol-ease);
  }

  .m-main__item.has-megamenu > .m-main__link {
    padding-bottom: 0;
  }

  .m-main .current-menu-item > .m-main__link,
  .m-main .current-menu-parent > .m-main__link,
  .no-touchevents .m-main__link:hover,
  .no-touchevents .m-main__item.menu-item-has-children:hover > .m-main__link,
  .m-main__item.submenu-open > .m-main__link {
    color: var(--ol-text);
  }

  /* Below the bar's glass so the panel slides out from under it */
  .m-mega {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: -2;
    padding: 36px 0 32px;
    border-bottom: 1px solid var(--ol-separator);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: var(--hdr-blur);
    backdrop-filter: var(--hdr-blur);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .12);
    animation: ol-hdr-drop .3s var(--ol-ease-out) both;
  }

  /* Keyboard access. :focus-within alone would keep the panel stuck open after
     a tap (touch toggle) or a mouse cmd+click, both of which leave focus on a
     link without :focus-visible. :has(:focus-visible) alone fails in Chrome:
     Tab blurs the trigger, the panel hides, and the next link is skipped. */
  .m-main__item.has-megamenu:focus-within:not(:has(:focus:not(:focus-visible))) > .m-mega {
    display: block;
  }

  /* Open panel and bar read as one sheet: same tint, hairline only below */
  .no-touchevents .header:has(.has-megamenu:hover)::before,
  .header:has(.has-megamenu.submenu-open, .has-megamenu :focus-visible)::before {
    border-bottom-color: transparent;
    background: rgba(255, 255, 255, .92);
  }

  .m-mega__title {
    margin-bottom: 10px;
    padding: 0;
  }

  .m-mega .m-mega__link {
    width: fit-content;
    padding: 4px 0;
    font-size: 15px;
    line-height: 20px;
  }

  .m-mega__btn {
    margin: 24px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--ol-separator);
    font-size: var(--ol-fs-small);
  }

  .m-social {
    position: static;
    flex: none;
    margin-left: auto;
    padding-left: 16px;
    line-height: 0;
  }

  .m-social__list {
    gap: 10px;
  }

  .m-social__link,
  .m-social .icon-svg {
    width: 18px;
    height: 18px;
  }

  .m-social__link {
    border-radius: 5px;
  }
}

@keyframes ol-hdr-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 1000px) {
  .header__logo { margin-right: 20px; }
  .m-main .m-main__link { padding: 0 14px; font-size: 16px; }
  .m-social__list { gap: 12px; }
}

@media (min-width: 1200px) {
  .header__logo { margin-right: 24px; }
  .m-main .m-main__link { padding: 0 24px; }
  .m-social__list { gap: 14px; }
}

/* Search overlay
   ========================================================================== */

/* .95 is the lowest tint that keeps the description at 4.5:1 and the
   placeholder at 3:1 even over a black backdrop */
.b-search {
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
}

.search-open .b-search {
  animation: ol-hdr-fade .3s var(--ol-ease-out) both;
}

.search-open .b-search__wrap {
  animation: ol-hdr-drop .4s var(--ol-ease-out) both;
}

.b-search__wrap {
  padding: clamp(96px, 20vh, 184px) 0 0;
}

.b-search__form {
  margin: 0 0 14px;
  padding-right: 48px;
  border-bottom: 1px solid var(--ol-hairline);
  transition: border-color .25s var(--ol-ease);
}

.b-search__form:focus-within {
  border-bottom-color: var(--ol-accent);
}

.b-search .inp-search,
.b-search .inp-search:focus {
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: none;
  box-shadow: none;
  color: var(--ol-text);
  font-size: 32px;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: var(--ol-track-display);
}

.b-search .inp-search::placeholder {
  color: var(--ol-text-3);
}

.b-search__btn {
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--ol-text-3);
}

.b-search__btn .icon-svg {
  width: 20px;
}

.b-search__desc {
  color: var(--ol-text-2);
  font-size: var(--ol-fs-small);
  text-wrap: pretty;
}

.b-search .b-search__close {
  top: calc((var(--hdr-h) - 36px) / 2);
  right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .06);
  color: var(--ol-text);
  transition: background-color .2s var(--ol-ease);
}

.b-search__close .icon-svg {
  width: 12px;
}

.no-touchevents .b-search__close:hover {
  background: rgba(0, 0, 0, .1);
  color: var(--ol-text);
}

@media (min-width: 750px) {
  .b-search .b-search__close {
    right: max(15px, calc((100% - 1140px) / 2));
  }

  .b-search .inp-search,
  .b-search .inp-search:focus {
    font-size: 40px;
    line-height: 52px;
  }

  .b-search__btn {
    bottom: 12px;
  }

  .b-search__btn .icon-svg {
    width: 22px;
  }

  .b-search__desc {
    font-size: 15px;
  }
}

@keyframes ol-hdr-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==========================================================================
   Home: "Office of the Week" heroes (.c-top-articles)
   and "The best ..." category tiles (.c-best-of)
   ========================================================================== */

/* Photos stay as bright as in the original; a soft diffuse shadow (not a dark
   scrim) keeps white text legible on light interiors */
.c-top-articles,
.c-best-of {
  --ol-photo-text-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 2px 16px rgba(0, 0, 0, .3);
}

/* --- Office of the Week ------------------------------------------------- */

.c-top-articles {
  --ol-hero-inset: 20px;
  margin: 0 0 32px;
}

.c-top-articles__item {
  margin: 0 0 20px;
}

.c-top-articles__item:last-child {
  margin-bottom: 0;
}

.c-top-articles__link {
  overflow: hidden;
  border-radius: var(--ol-radius);
  background: var(--ol-fill-2);
  box-shadow: var(--ol-shadow);
  /* Own compositing layer so Safari clips the scaled image to the radius */
  transform: translateZ(0);
  transition: transform var(--ol-dur) var(--ol-ease-out), box-shadow var(--ol-dur) var(--ol-ease-out);
}

.c-top-articles__img:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, .06) 64%,
    rgba(0, 0, 0, .16) 80%,
    rgba(0, 0, 0, .28) 100%);
  pointer-events: none;
}

.c-top-articles__img img {
  transition: transform .6s var(--ol-ease-out);
}

.c-top-articles__content {
  left: var(--ol-hero-inset);
  right: calc(var(--ol-hero-inset) + 60px);
  bottom: var(--ol-hero-inset);
}

.c-top-articles__note {
  margin: 0 0 8px;
  color: #fff;
  font-size: var(--ol-fs-caption);
  font-weight: 600;
  line-height: 16px;
  letter-spacing: var(--ol-track-caps);
  text-shadow: var(--ol-photo-text-shadow);
}

.c-top-articles__name {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: var(--ol-track-display);
  text-shadow: var(--ol-photo-text-shadow);
}

/* Doubled class beats the customizer's inline .c-top-articles__cta colors */
.c-top-articles__link .c-top-articles__cta {
  right: var(--ol-hero-inset);
  bottom: var(--ol-hero-inset);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* Dark glass: the photos are no longer dimmed, so a white chevron on white glass would wash out */
  background: rgba(0, 0, 0, .24);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: background-color var(--ol-dur) var(--ol-ease-out);
}

.c-top-articles__link .c-top-articles__cta:before {
  margin: -8px 0 0 -8px;
  width: 16px;
  height: 16px;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / 16px 16px no-repeat;
  transition: transform var(--ol-dur) var(--ol-ease-out);
}

.c-top-articles__link .c-top-articles__cta:after {
  display: none;
}

.no-touchevents .c-top-articles__link:hover {
  box-shadow: var(--ol-shadow-hover);
  transform: translateY(-2px);
}

.no-touchevents .c-top-articles__link:hover .c-top-articles__img img {
  transform: scale(1.03);
}

.no-touchevents .c-top-articles .c-top-articles__link:hover .c-top-articles__cta {
  background: rgba(0, 0, 0, .4);
}

.no-touchevents .c-top-articles__link:hover .c-top-articles__cta:before {
  transform: translateX(2px);
}

@media (min-width: 750px) {
  .c-top-articles {
    margin: 0 0 20px;
  }

  .c-top-articles__list {
    gap: 20px;
    margin-left: 0;
  }

  .c-top-articles__item {
    flex: 1 1 0;
    width: auto;
    margin: 0;
    border-left: 0;
  }

  .c-top-articles__link {
    border-radius: var(--ol-radius-lg);
  }
}

@media (min-width: 1000px) {
  .c-top-articles {
    --ol-hero-inset: 28px;
  }

  .c-top-articles__name {
    font-size: 28px;
    line-height: 1.1;
  }
}

@media (min-width: 1200px) {
  .c-top-articles__name {
    font-size: 30px;
  }
}

/* --- The best ... ------------------------------------------------------- */

/* --ol-tile-inset mirrors --ol-hero-inset so tile and hero text share an edge */
.c-best-of {
  --ol-tile-inset: 20px;
  margin: 0 0 40px;
}

/* Mobile copy at the end of the content column */
.c-best-of:last-child {
  margin: 32px 0 0;
}

.c-best-of__item {
  margin: 0 0 12px;
}

.c-best-of__item:last-child {
  margin-bottom: 0;
}

/* Radius in proportion to the 80px height (hero tiles: 16px on 300px) */
.c-best-of__link {
  height: 80px;
  border-radius: var(--ol-radius-xs);
  /* Loading placeholder in the tone of the pre-dimmed tile images */
  background: #8e8e93;
  box-shadow: var(--ol-shadow);
  transform: translateZ(0);
  transition: transform var(--ol-dur) var(--ol-ease-out), box-shadow var(--ol-dur) var(--ol-ease-out);
}

/* The parent's straight 4px brand edge, in the logo palette */
.c-best-of__item:nth-child(1) .c-best-of__link:before { background: var(--ol-cyan); }
.c-best-of__item:nth-child(2) .c-best-of__link:before { background: var(--ol-orange); }
.c-best-of__item:nth-child(3) .c-best-of__link:before { background: var(--ol-yellow); }
.c-best-of__item:nth-child(4) .c-best-of__link:before { background: var(--ol-green); }

.c-best-of__img {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
}

.c-best-of img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ol-ease-out);
}

/* Top-aligned so the eyebrows stay on one line when a title wraps */
.c-best-of__content {
  inset: 0;
  z-index: 1;
  padding: 20px var(--ol-tile-inset) 0;
}

.c-best-of__subtitle {
  margin: 0 0 3px;
  color: rgba(255, 255, 255, .9);
  font-size: var(--ol-fs-footnote);
  font-weight: 600;
  line-height: 14px;
  letter-spacing: var(--ol-track-caps);
  text-shadow: var(--ol-photo-text-shadow);
}

.c-best-of__title {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ol-track-body);
  text-shadow: var(--ol-photo-text-shadow);
}

.no-touchevents .c-best-of__link:hover {
  box-shadow: var(--ol-shadow-hover);
  transform: translateY(-2px);
}

.no-touchevents .c-best-of__link:hover .c-best-of__img img {
  transform: scale(1.03);
}

@media (min-width: 750px) {
  .c-best-of__list {
    gap: 20px;
    margin-left: 0;
  }

  .c-best-of__item {
    flex: 1 1 0;
    width: auto;
    margin: 0;
    border-left: 0;
  }

  .c-best-of__content {
    padding-top: 22px;
  }

  .c-best-of__subtitle {
    font-size: var(--ol-fs-caption);
  }

  .c-best-of__title {
    font-size: 16px;
  }
}

/* Narrow tiles wrap "Modern Office Design" (to ~860px in SF Pro, ~1000px in
   Inter); make room for two lines above the bottom edge */
@media (min-width: 750px) and (max-width: 999px) {
  .c-best-of__content {
    padding-top: 18px;
  }

  .c-best-of__title {
    line-height: 1.1;
  }
}

@media (min-width: 1000px) {
  .c-best-of {
    --ol-tile-inset: 28px;
  }

  /* Grows with the tiles, 16px at 1000 to 20px at 1200, so the longest title
     stays on one line in Inter as well */
  .c-best-of__title {
    font-size: calc(16px + (100vw - 1000px) * .02);
  }
}

@media (min-width: 1200px) {
  .c-best-of__content {
    padding-top: 20px;
  }

  .c-best-of__subtitle {
    font-size: var(--ol-fs-footnote);
  }

  .c-best-of__title {
    font-size: 20px;
  }
}

/* ==========================================================================
   Listing: article cards, archive header, filter bar, pagination, 404
   ========================================================================== */

/* Archive header
   ========================================================================== */

.archive-header {
  margin: 0 0 24px;
  padding: 16px 0 0;
}

.archive-header__title {
  margin: 0;
  color: var(--ol-text);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--ol-track-display);
}

.archive-header__title span {
  color: var(--ol-text-2);
  font-size: .6em;
  font-weight: 400;
  letter-spacing: var(--ol-track-body);
}

@media (min-width: 750px) {
  .archive-header {
    margin-bottom: 32px;
    padding-top: 24px;
  }

  .archive-header__title {
    font-size: var(--ol-fs-h1);
  }
}

/* Article cards
   ========================================================================== */

.c-articles {
  color: var(--ol-text-2);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
}

.c-articles__item {
  isolation: isolate; /* keeps the zoomed image clipped to the radius in Safari */
  margin: 0 0 20px;
  border-radius: var(--ol-radius);
  background: var(--ol-surface);
  box-shadow: none;
  transition: transform var(--ol-dur) var(--ol-ease-out), box-shadow var(--ol-dur) var(--ol-ease-out);
}

.c-articles__img img {
  transition: transform .4s var(--ol-ease-out);
}

.no-touchevents .c-articles__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--ol-shadow-hover);
}

.no-touchevents .c-articles__item:hover .c-articles__img img {
  transform: scale(1.03);
}

.c-articles__content {
  padding: 16px 20px 20px;
}

/* Category label: sentence case like a web tag, not a newspaper kicker */
.c-articles__meta {
  margin: 0 0 6px;
  text-transform: none;
}

.c-articles__meta .b-meta__item {
  font-size: var(--ol-fs-footnote);
  line-height: 18px;
  font-weight: 500;
  letter-spacing: -.005em;
}

.c-articles .b-meta__category {
  padding: 0;
  color: var(--ol-accent);
}

/* The parent's 35px bar reads as an em dash next to caps; the accent color alone marks the eyebrow. */
.c-articles .b-meta__category::before {
  display: none;
}

.c-articles .post-category a {
  color: var(--ol-accent);
}

.no-touchevents .c-articles .post-category a:hover {
  color: var(--ol-accent-hover);
}

/* Title */
.c-articles__name {
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.012em;
}

.c-articles__name a {
  color: var(--ol-text);
}

.no-touchevents .c-articles__name a:hover {
  color: var(--ol-accent);
}

/* Designer */
.c-articles__designer {
  margin: 0 0 10px;
  color: var(--ol-text-2);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.c-articles__designer a {
  color: var(--ol-accent);
}

.no-touchevents .c-articles__designer a:hover {
  color: var(--ol-accent-hover);
}

/* Excerpt: a fixed height, not a line clamp, so the parent's dotdotdot can cut at a word and append its "..." link */
.c-articles__desc {
  height: 3em;
  color: var(--ol-text-2);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -.01em;
}

/* dotdotdot measures inside a temporary div and appends the link afterwards;
   measuring narrower leaves room for it on the last line */
.c-articles__desc > div {
  max-width: calc(100% - 1.25em);
}

.c-articles__desc a {
  color: var(--ol-accent);
  font-size: inherit;
  font-weight: 600;
}

/* dotdotdot's ellipsis leaves a space before the link it appends; the server excerpt has none */
.c-articles__desc .dots {
  margin-left: -.25em;
}

.no-touchevents .c-articles__desc a:hover {
  color: var(--ol-accent-hover);
}

/* Designers variant: logo tile + location */
.c-articles__logo {
  right: 20px;
  top: 16px;
  width: 50px;
  height: 50px;
  padding: 6px;
  border-radius: var(--ol-radius-sm);
  background: var(--ol-surface);
  box-shadow: inset 0 0 0 1px var(--ol-separator);
}

.c-articles--designers .c-articles__name {
  margin-bottom: 6px;
}

.c-articles--designers .c-articles__meta {
  margin-bottom: 10px;
}

.c-articles--designers .b-meta__category {
  color: var(--ol-text-2);
}

@media (min-width: 750px) {
  .c-articles__content {
    padding: 22px 20px 16px;
  }

  .c-articles__meta {
    margin: 0 0 8px;
  }

  .c-articles__name {
    margin-bottom: 6px;
    font-size: 20px;
    line-height: 1.22;
  }

  /* Two lines. dotdotdot truncates to max-height at a word, so it must stay 2 x line-height
     and no line clamp (its measuring div would inherit the clamp and always fit). */
  .c-articles__name a {
    overflow: hidden;
    max-height: 2.44em;
  }

  .c-articles--designers .c-articles__content {
    padding-top: 26px;
  }

  .c-articles__logo {
    top: 22px;
  }

  .c-articles--designers .c-articles__desc {
    height: 4.5em;
  }
}

@media (min-width: 1000px) {
  .c-articles__content {
    padding: 28px 32px 20px;
  }

  .c-articles__name {
    font-size: 23px;
    line-height: 1.2;
  }

  .c-articles__name a {
    max-height: 2.4em;
  }

  .c-articles__logo {
    right: 32px;
    top: 32px;
  }

  .c-articles--designers .c-articles__content {
    padding-top: 32px;
  }

  .c-articles--designers .c-articles__name {
    height: auto;
  }
}

/* Filter bar
   ========================================================================== */

.f-filter {
  --field-border-hover: #b9b9be;
  --match-tint: color-mix(in srgb, var(--ol-accent) 14%, transparent);
  margin: 0 0 32px;
}

.f-filter__item {
  margin: 0 0 12px;
}

.f-filter__label {
  margin: 0 0 6px;
  color: var(--ol-text-2);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.f-filter__tags {
  margin: 16px 0 0 -6px;
}

.f-filter__desc,
.f-filter__tag {
  margin: 0 0 6px 6px;
}

.f-filter__desc {
  padding: 5px 2px 5px 0;
  color: var(--ol-text-2);
  font-size: 14px;
  line-height: 20px;
}

.f-filter__tag {
  padding: 5px 30px 5px 12px;
  border-radius: var(--ol-radius-pill);
  background: var(--ol-surface);
  color: var(--ol-text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--ol-separator);
  transition: box-shadow .2s var(--ol-ease);
}

.f-filter__tag span {
  right: 11px;
  top: 50%;
  width: 9px;
  margin-top: -4.5px;
  color: var(--ol-text-3);
  transition: color .2s var(--ol-ease);
}

.no-touchevents .f-filter .f-filter__tag:hover {
  color: var(--ol-text);
  box-shadow: inset 0 0 0 1px var(--ol-hairline);
}

.no-touchevents .f-filter__tag:hover span {
  color: var(--ol-text);
}

@media (min-width: 750px) {
  /* gap instead of the parent's negative gutter; min-width 0 lets the columns shrink
     instead of pushing the last one into the sidebar */
  .f-filter__wrap {
    gap: 20px;
    margin: 0;
  }

  .f-filter__item {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    margin: 0;
  }

  .f-filter__select {
    min-width: 0;
  }

  .f-filter__label {
    margin: 0 10px 0 0;
  }
}

/* Too narrow for inline labels: stack each label above its field, keep three columns */
@media (min-width: 750px) and (max-width: 1199px) {
  .f-filter__item {
    flex-direction: column;
    align-items: stretch;
  }

  .f-filter__label {
    margin: 0 0 6px;
  }

  .f-filter__wrap {
    gap: 12px;
  }
}

/* Selectize (filter dropdowns) */
.selectize-control {
  height: 40px;
}

.selectize-dropdown,
.selectize-input,
.selectize-input input {
  color: var(--ol-text);
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -.01em;
}

.selectize-input {
  height: 40px;
  padding: 7px 34px 7px 14px;
  border: 1px solid var(--ol-hairline);
  border-radius: var(--ol-radius-sm);
  box-shadow: none;
  transition: border-color .2s var(--ol-ease), box-shadow .2s var(--ol-ease);
}

.selectize-input:hover {
  border-color: var(--field-border-hover);
}

.selectize-input.focus {
  border-color: var(--ol-accent);
  box-shadow: 0 0 0 4px var(--ol-focus-halo);
}

.selectize-input.dropdown-active {
  border-radius: var(--ol-radius-sm);
}

.selectize-input.dropdown-active::before {
  display: none;
}

/* Below 16px iOS zooms the page when the search field gets focus */
@media (max-width: 749px) {
  .selectize-input,
  .selectize-input input {
    font-size: 16px;
  }
}

.selectize-input > input {
  text-overflow: ellipsis;
}

.selectize-input > input::placeholder {
  color: var(--ol-text-2);
  opacity: 1;
}

/* Chevron in place of the gray triangle */
.selectize-control.single .selectize-input::after {
  right: 15px;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-style: solid;
  border-width: 0 1.5px 1.5px 0;
  border-color: var(--ol-text-2);
  transform: rotate(45deg);
  transition: transform .25s var(--ol-ease-out), margin-top .25s var(--ol-ease-out);
}

.selectize-control.single .selectize-input.dropdown-active::after {
  margin-top: -2px;
  border-width: 0 1.5px 1.5px 0;
  border-color: var(--ol-accent);
  transform: rotate(-135deg);
}

/* Three stacked columns: tighter insets keep "Choose industry..." whole on a 768 tablet */
@media (min-width: 750px) and (max-width: 1199px) {
  .selectize-input {
    padding-right: 26px;
    padding-left: 12px;
  }

  .selectize-control.single .selectize-input::after {
    right: 12px;
  }
}

/* Selectize sizes the popover to the field; long locations widen it instead of wrapping */
.selectize-dropdown {
  overflow: hidden;
  min-width: max-content;
  margin: 6px 0 0;
  border: 0;
  border-radius: var(--ol-radius-sm);
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--ol-shadow-pop);
}

/* 7.5 rows: the half row says the list scrolls */
.selectize-dropdown-content {
  max-height: 276px;
  padding: 6px;
  overscroll-behavior: contain;
}

.selectize-dropdown .option {
  padding: 0;
  border-radius: var(--ol-radius-xs);
  font-size: 15px;
  line-height: 20px;
}

.selectize-dropdown a {
  padding: 8px 12px;
  color: var(--ol-text);
}

.selectize-dropdown .active {
  background-color: var(--ol-accent-tint);
  color: var(--ol-accent);
}

.selectize-dropdown .active a,
.no-touchevents .selectize-dropdown a:hover {
  color: var(--ol-accent);
}

.selectize-dropdown [data-selectable] .highlight {
  background: var(--match-tint);
  border-radius: 3px;
}

/* Pagination
   ========================================================================== */

.pagination {
  margin: 32px 0 0;
  padding: 2px 100px;
}

.pagination__item {
  margin: 0 2px;
}

.pagination .pagination__link {
  box-sizing: border-box;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  border-radius: var(--ol-radius-pill);
  color: var(--ol-text);
  font-size: 15px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  transition: background-color .2s var(--ol-ease), color .2s var(--ol-ease);
}

.no-touchevents .pagination a.pagination__link:hover {
  background: var(--ol-surface);
  color: var(--ol-text);
}

.pagination .pagination__link.current {
  background: var(--ol-fill-2);
  color: var(--ol-text);
  font-weight: 600;
}

.pagination .pagination__link.dots {
  min-width: 24px;
  padding: 0;
  color: var(--ol-text-2);
}

/* Prev / Next: the parent's arrow square becomes a pill with a chevron */
.pagination .pagination__prev,
.pagination .pagination__next {
  height: 40px;
  border-radius: var(--ol-radius-pill);
  background: var(--ol-accent);
  color: #fff;
  font-size: 15px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: -.01em;
  transition: background-color .2s var(--ol-ease);
}

.pagination .pagination__prev {
  padding: 0 18px 0 34px;
}

.pagination .pagination__next {
  padding: 0 34px 0 18px;
}

.no-touchevents .pagination .pagination__prev:hover,
.no-touchevents .pagination .pagination__next:hover {
  background: var(--ol-accent-hover);
  color: #fff;
}

.pagination .pagination__prev span,
.no-touchevents .pagination .pagination__prev:hover span,
.pagination .pagination__next span,
.no-touchevents .pagination .pagination__next:hover span {
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border: solid #fff;
  border-width: 2px 2px 0 0;
  border-radius: 1px;
  background: none;
}

.pagination .pagination__prev span {
  left: 18px;
  transform: rotate(-135deg);
}

.pagination .pagination__next span {
  right: 18px;
  transform: rotate(45deg);
}

.pagination__prev span::before,
.pagination__prev span::after,
.pagination__next span::before,
.pagination__next span::after {
  display: none;
}

@media (min-width: 750px) {
  .pagination {
    margin-top: 48px;
  }
}

/* 404: the single card's padding and text inset, left-aligned as in the original
   ========================================================================== */

.error404 .b-content h1 {
  margin-bottom: 12px;
  letter-spacing: var(--ol-track-display);
}

.error404 .b-content p {
  margin-bottom: 28px;
  color: var(--ol-text-2);
  font-size: var(--ol-fs-body);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: var(--ol-track-body);
}

.error404 .b-content strong {
  color: var(--ol-text);
  font-weight: 600;
}

.error404 .b-content p:last-child {
  margin-bottom: 0;
}

@media (min-width: 750px) {
  .error404 .b-content p {
    font-size: var(--ol-fs-lead);
  }
}

/* ==========================================================================
   Single: article card, meta, share, reading typography, specs, figures,
   related posts, lightbox
   ========================================================================== */

/* Card + rhythm
   Photos sit wider than the text column, as in the original: the card keeps a
   small padding (where figures live) and text blocks get an extra inset.
   ========================================================================== */

.b-content {
  --single-pad-top: 32px;
  --single-pad-x: 12px;
  --single-pad-bottom: 32px;
  --single-inset: 12px;
  --single-img-radius: 12px;
  --single-ink: #333336;

  margin: 0 0 32px;
  padding: var(--single-pad-top) var(--single-pad-x) var(--single-pad-bottom);
  border-radius: var(--ol-radius-lg);
  background: var(--ol-surface);
  box-shadow: none;
  color: var(--single-ink);
  font-size: var(--ol-fs-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: var(--ol-track-body);
}

:is(.b-content, .b-content__inner) > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, table, hr, .b-meta, .b-content__hd, .b-social-area) {
  margin-left: var(--single-inset);
  margin-right: var(--single-inset);
}

@media (min-width: 750px) {
  .b-content {
    --single-pad-top: 40px;
    --single-pad-x: 20px;
    --single-pad-bottom: 40px;
    --single-inset: 20px;
  }

  .b-content__inner {
    padding-left: 0;
  }
}

@media (min-width: 1000px) {
  .b-content {
    --single-pad-top: 48px;
    --single-pad-x: 24px;
    --single-pad-bottom: 48px;
    --single-inset: 32px;

    font-size: 18px;
  }
}

/* Hero image: full bleed at the top of the card */
.b-content .b-content__image {
  margin: calc(var(--single-pad-top) * -1) calc(var(--single-pad-x) * -1) 24px;
  border-radius: var(--ol-radius-lg) var(--ol-radius-lg) 0 0;
  background: var(--ol-fill);
}

.b-content__image a,
.b-content figure a {
  cursor: zoom-in;
}

/* The photo links have no box of their own (inline around a positioned or
   clipped img), so the focus ring is drawn on the frame; the full-bleed hero
   keeps it inside the card. */
.b-content .b-content__image:has(> a:focus-visible) {
  outline: 2px solid var(--ol-accent);
  outline-offset: -2px;
}

.b-content figure.img--lazy:has(> a:focus-visible) {
  outline: 2px solid var(--ol-accent);
  outline-offset: 2px;
}

@media (min-width: 750px) {
  .b-content .b-content__image {
    margin-bottom: 32px;
  }
}

@media (min-width: 1000px) {
  .b-content .b-content__image {
    margin-bottom: 40px;
  }
}

/* Title
   ========================================================================== */

.b-content .b-content__title {
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--ol-text);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: var(--ol-track-display);
}

@media (min-width: 750px) {
  .b-content .b-content__title {
    margin-bottom: 20px;
    font-size: 32px;
    line-height: 1.1;
  }
}

@media (min-width: 1000px) {
  .b-content .b-content__title {
    font-size: var(--ol-fs-h1);
    line-height: 1.08;
  }
}

/* Designer header: title + firm logo */
.b-content .b-content__hd .b-content__title {
  margin: 0 0 20px;
}

.b-content p.b-content__logo {
  height: 60px;
  margin-bottom: 24px;
  padding: 12px;
  border-radius: var(--ol-radius-sm);
  background: var(--ol-surface);
  box-shadow: inset 0 0 0 1px var(--ol-separator);
}

@media (min-width: 750px) {
  .b-content .b-content__hd .b-content__title {
    margin: 0 150px 0 0;
  }

  .b-content p.b-content__logo {
    top: 50%;
    width: 120px;
    height: 48px;
    margin: -24px 0 0;
    padding: 8px 12px;
  }
}

/* Meta row: avatar, author, category, time + share
   ========================================================================== */

.b-content .b-meta {
  overflow: visible;
  margin-top: 0;
  margin-bottom: 28px;
  padding: 12px 0;
  border-color: var(--ol-separator);
  color: var(--ol-text-2);
  text-transform: none;
}

.b-content .b-meta p {
  margin: 0;
}

/* Every item carries a leading dot; the list is pulled left by one dot slot and
   clipped, so a wrapped line never starts with an orphan separator. */
.b-content .b-meta__left {
  overflow-x: clip;
  margin: 0 0 12px;
}

.b-content .b-meta__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 0 -23px;
}

.b-content .b-meta__item {
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--ol-text-2);
  font-size: var(--ol-fs-footnote);
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -.006em;
}

.b-content .b-meta__item::before {
  content: '';
  width: 3px;
  height: 3px;
  margin: 0 10px;
  border-radius: 50%;
  background: var(--ol-text-3);
}

.b-content .b-meta__author {
  display: flex;
  align-items: center;
  color: var(--ol-text);
  font-weight: 500;
}

.b-content .b-meta__author img {
  float: none;
  width: 24px;
  height: 24px;
  margin: 0 8px 0 0;
  border: 0;
  border-radius: 50%;
  background: var(--ol-fill);
}

.b-content .b-meta__category {
  padding: 0;
}

.b-content .b-meta__category::before {
  display: none;
}

.b-content .b-meta a {
  color: var(--ol-accent);
  font-weight: 500;
}

.no-touchevents .b-content .b-meta a:hover {
  color: var(--ol-accent-hover);
}

.b-content .b-meta__time {
  color: var(--ol-text-2);
}

@media (min-width: 750px) {
  .b-content .b-meta {
    margin-bottom: 32px;
    padding: 14px 0;
  }

  .b-content .b-meta__item {
    font-size: var(--ol-fs-small);
  }
}

@media (min-width: 1000px) {
  .b-content .b-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 36px;
  }

  .b-content .b-meta__left,
  .b-content .b-meta__right {
    float: none;
    width: auto;
    margin: 0;
  }

  .b-content .b-meta__right {
    flex: none;
  }
}

/* Share buttons: quiet pills. The FB like iframe is left exactly as Facebook
   renders it; only the offset the parent added for its old margins is reset. */
.b-content .social-likes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: auto;
  margin-left: 0;
  padding: 0;
  font-size: var(--ol-fs-footnote);
  font-weight: 500;
  line-height: 1;
}

.b-content .social-likes .fb-like iframe {
  left: 0;
}

.b-content .social-likes__widget {
  display: inline-flex;
  align-items: center;
  height: 30px;
  margin: 0 0 0 8px;
  padding: 0 14px;
  border-radius: var(--ol-radius-pill);
  background: var(--ol-fill);
  color: var(--ol-text);
  letter-spacing: -.006em;
  transition: background-color .2s var(--ol-ease);
}

.b-content .social-likes .fb-like + .social-likes__widget {
  margin-left: 0;
}

.b-content .social-likes__widget:hover {
  background: var(--ol-fill-2);
}

.b-content .social-likes__button {
  display: inline-flex;
  align-items: center;
}

.b-content .social-likes__widget .icon-svg {
  top: 0;
  width: 13px;
  margin: 0 6px 0 0;
}

.b-content .social-likes__widget_twitter .icon-svg {
  color: #1d9bf0;
}

.b-content .social-likes__widget_linkedin .icon-svg {
  color: #0a66c2;
}

.b-content .social-likes__counter {
  color: var(--ol-text-2);
}

@media (min-width: 1000px) {
  .b-content .b-meta__right .social-likes {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}

.b-content .b-social-area {
  margin-top: 40px;
  margin-bottom: 0;
  padding: 20px 0 0;
  border-top-color: var(--ol-separator);
}

/* Reading typography
   ========================================================================== */

.b-content p {
  margin: 0 0 24px;
}

.b-content a:not(.btn) {
  color: var(--ol-accent);
  font-weight: 500;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

.b-content a:not(.btn):hover {
  color: var(--ol-accent-hover);
  text-decoration: underline;
}

.b-content strong,
.b-content b {
  color: var(--ol-text);
  font-weight: 600;
}

.b-content h2,
.b-content h3,
.b-content h4 {
  margin: 40px 0 14px;
  color: var(--ol-text);
  font-weight: 600;
}

.b-content h3 {
  font-size: var(--ol-fs-h3);
}

.b-content h4 {
  font-size: 18px;
}

.b-content ul:not([class]),
.b-content ol:not([class]),
.b-content .wp-block-list {
  margin-top: 0;
  margin-bottom: 24px;
}

.b-content ul:not([class]) > li,
.b-content ul.wp-block-list > li {
  margin: 0 0 8px;
  padding-left: 22px;
  background: radial-gradient(circle, var(--ol-text-3) 2.5px, transparent 3px) 4px calc(.8em - 3px) / 6px 6px no-repeat;
}

.b-content ol:not([class]) > li,
.b-content ol.wp-block-list > li {
  margin: 0 0 8px;
  padding-left: 26px;
}

.b-content ol:not([class]) > li::before,
.b-content ol.wp-block-list > li::before {
  color: var(--ol-text-2);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Blockquote: most office posts are one long quote from the design firm, so
   it reads as body text with a quiet rule instead of a decorative glyph. */
.b-content blockquote {
  margin-top: 32px;
  margin-bottom: 32px;
  padding: 0 0 0 20px;
}

.b-content blockquote::before {
  display: none;
}

.b-content blockquote::after {
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 3px;
  border: 0;
  border-radius: 3px;
  background: var(--ol-fill-2);
}

.b-content blockquote p {
  margin: 0 0 20px;
  hanging-punctuation: first;
}

.b-content blockquote p:last-child {
  margin-bottom: 0;
}

@media (min-width: 750px) {
  .b-content blockquote {
    padding-left: 24px;
  }

  .b-content blockquote p {
    margin-bottom: 24px;
  }
}

/* The card padding alone ends the card */
:is(.b-content, .b-content__inner) > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote):last-child {
  margin-bottom: 0;
}

/* Specs panels: ul.location (posts) and dl.b-location (designers)
   ========================================================================== */

.b-content .location,
.b-content .b-location {
  margin-top: 32px;
  margin-bottom: 32px;
  padding: 4px 20px;
  border: 0;
  border-radius: var(--ol-radius-sm);
  background: var(--ol-fill);
  box-shadow: none;
  color: var(--ol-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.011em;
}

.b-content .location li {
  margin: 0;
  padding: 12px 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.b-content .location li + li {
  border-top: 1px solid var(--ol-separator);
}

.b-content .location strong,
.b-content .b-location dt {
  display: block;
  width: auto;
  color: var(--ol-text-2);
  font-size: var(--ol-fs-footnote);
  font-weight: 500;
  line-height: 18px;
}

.b-content .location strong {
  margin: 0 0 2px;
}

.b-content .b-location dt {
  float: none;
  padding: 12px 0 2px;
}

.b-content .b-location dd {
  padding: 0 0 12px;
  overflow-wrap: anywhere;
}

.b-content .b-location dd + dt {
  border-top: 1px solid var(--ol-separator);
}

@media (min-width: 750px) {
  .b-content .location,
  .b-content .b-location {
    padding: 4px 24px;
  }

  /* The label floats into the li's left padding (cqw: same base for both), so a
     label that wraps at tablet widths grows its row instead of overlapping.
     The em floor keeps "Date completed:" on one line near 768. */
  .b-content .location {
    --spec-label: max(34cqw, 9.5em);

    container-type: inline-size;
  }

  .b-content .location li {
    display: flow-root;
    padding: 13px 0 13px var(--spec-label);
  }

  .b-content .location strong {
    float: left;
    width: var(--spec-label);
    margin: 0 0 0 calc(var(--spec-label) * -1);
    padding-right: 16px;
  }

  .b-content .location strong,
  .b-content .b-location dt {
    font-size: inherit;
    line-height: inherit;
  }

  .b-content .b-location {
    display: grid;
    grid-template-columns: 34% minmax(0, 1fr);
  }

  .b-content .b-location dt {
    grid-column: 1;
    padding: 13px 16px 13px 0;
  }

  .b-content .b-location dd {
    grid-column: 2;
    padding: 13px 0;
  }

  .b-content .b-location dd + dt + dd {
    border-top: 1px solid var(--ol-separator);
  }
}

/* Figures: rounded photos, caption as a frosted pill on the photo
   ========================================================================== */

.b-content figure.img--lazy {
  isolation: isolate;
  margin-top: 0;
  margin-bottom: 12px;
  border-radius: var(--single-img-radius);
}

/* The figure margin is the tighter gallery gap; text after a photo keeps the
   paragraph rhythm (collapses with it to 24px at every width). */
.b-content figure.img--lazy + p {
  margin-top: 24px;
}

.b-content .wp-caption-text {
  left: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 5px 11px;
  /* 14px = half a one-line pill, so a wrapped caption becomes a soft rectangle */
  border-radius: 14px;
  /* .55 keeps white text at 4.5:1 even over a pure white backdrop */
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: #fff;
  font-size: var(--ol-fs-caption);
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -.003em;
  text-shadow: none;
  pointer-events: none;
}

@media (min-width: 750px) {
  .b-content figure.img--lazy {
    margin-bottom: 16px;
  }

  .b-content .wp-caption-text {
    left: 16px;
    bottom: 16px;
    max-width: calc(100% - 32px);
    font-size: var(--ol-fs-footnote);
  }
}

@media (min-width: 1000px) {
  .b-content figure.img--lazy {
    margin-bottom: 20px;
  }
}

/* Related posts
   ========================================================================== */

.c-related__item {
  margin: 0 0 16px;
}

.c-related__link {
  isolation: isolate;
  border-radius: var(--ol-radius);
  background: var(--ol-fill);
  transition: transform var(--ol-dur) var(--ol-ease-out), box-shadow var(--ol-dur) var(--ol-ease-out);
}

/* Below the link's own layer, so its inset focus ring paints over the photo */
.c-related__img {
  position: relative;
  z-index: -1;
}

.c-related__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .28) 38%, rgba(0, 0, 0, 0) 66%);
  pointer-events: none;
}

.c-related img {
  transition: transform .5s var(--ol-ease-out);
}

.no-touchevents .c-related__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--ol-shadow-hover);
}

.no-touchevents .c-related__link:hover img {
  transform: scale(1.03);
}

.c-related__title {
  left: 20px;
  right: 68px;
  bottom: 20px;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ol-track-head);
  text-shadow: none;
}

/* Scoped to .c-related to beat the theme's inline color CSS printed after this file */
.c-related .c-related__cta {
  right: 16px;
  bottom: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: background-color .2s var(--ol-ease);
}

/* Chevron drawn with borders; the parent's two-triangle arrow needs an opaque fill */
.c-related__cta::before {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -6px;
  border: solid #fff;
  border-width: 2px 2px 0 0;
  border-radius: 1px;
  transform: rotate(45deg);
}

.c-related__cta::after {
  display: none;
}

.no-touchevents .c-related .c-related__link:hover .c-related__cta {
  background: rgba(255, 255, 255, .34);
}

@media (min-width: 750px) {
  .c-related__list {
    margin-left: -20px;
  }

  .c-related__item {
    margin: 0;
    border-left-width: 20px;
  }

  .c-related__title {
    left: 16px;
    right: 56px;
    bottom: 16px;
    font-size: 17px;
  }

  .c-related .c-related__cta {
    right: 14px;
    bottom: 14px;
    width: 32px;
    height: 32px;
  }
}

@media (min-width: 1000px) {
  .c-related__title {
    left: 24px;
    right: 72px;
    bottom: 24px;
    font-size: var(--ol-fs-h3);
  }

  .c-related .c-related__cta {
    right: 20px;
    bottom: 22px;
    width: 36px;
    height: 36px;
  }
}

/* Lightbox (Fancybox, custom side panel layout)
   ========================================================================== */

.fancybox-bg,
.fancybox-is-open .fancybox-bg {
  background: #0a0a0b;
}

.fancybox-side {
  padding: 30px;
  background: #161617;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .56);
  font-size: 15px;
  line-height: 1.45;
}

.fancybox-toolbar .fancybox-button--arrow_left,
.fancybox-toolbar .fancybox-button--arrow_right,
.fancybox-button--thumbs,
.fancybox-button--close {
  width: 44px;
  height: 44px;
  border: 0;
  background: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: #f5f5f7;
  transition: background-color .2s var(--ol-ease);
}

.fancybox-toolbar .fancybox-button--arrow_left:hover,
.fancybox-toolbar .fancybox-button--arrow_right:hover,
.fancybox-button--thumbs:hover,
.fancybox-button--close:hover {
  background: rgba(255, 255, 255, .2);
}

.fancybox-toolbar .fancybox-button--arrow_left {
  margin-right: 12px;
}

.fancybox-toolbar .fancybox-button--arrow_left div,
.fancybox-toolbar .fancybox-button--arrow_right div {
  width: 10px;
}

.fancybox-button--close div {
  width: 13px;
}

.fancybox-infobar {
  top: 38px;
  left: 146px;
  right: auto;
  width: auto;
  min-width: 0;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--ol-radius-pill);
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .6);
  font-size: var(--ol-fs-footnote);
  font-weight: 500;
  line-height: 28px;
  font-variant-numeric: tabular-nums;
}

.fancybox-hd {
  margin: 0 0 36px;
}

.fancybox-caption {
  margin: 0 0 12px;
  color: #f5f5f7;
  font-size: var(--ol-fs-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--ol-track-head);
}

.fancybox-side a,
.fancybox-author a {
  color: #2997ff;
}

.fancybox-side a:hover {
  color: #5cb0ff;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.fancybox-author {
  color: rgba(255, 255, 255, .72);
  font-size: var(--ol-fs-small);
}

.fancybox-title {
  border-top-color: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .48);
  font-size: var(--ol-fs-footnote);
  line-height: 1.45;
}

@media (max-width: 749px) {
  .fancybox-side {
    padding: 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  }

  .fancybox-hd {
    margin: 0 -20px 16px;
    border-bottom-color: rgba(255, 255, 255, .08);
  }

  .fancybox-toolbar .fancybox-button--arrow_left,
  .fancybox-toolbar .fancybox-button--arrow_right,
  .fancybox-button--thumbs,
  .fancybox-button--close {
    width: 40px;
    height: 40px;
  }

  .fancybox-infobar {
    top: 26px;
    left: 128px;
  }

  .fancybox-caption {
    margin: 0 0 6px;
    font-size: var(--ol-fs-body);
    line-height: 1.3;
  }
}

/* ==========================================================================
   Chrome: sidebar widgets + footer
   ========================================================================== */

:root {
  --chrome-facebook: #1877f2;
  --chrome-twitter: #1d9bf0;
}

/* Sidebar
   ========================================================================== */

.b-side > .widget:last-child {
  margin-bottom: 0;
}

/* stacked last in .main, whose own bottom padding already ends the page */
@media (max-width: 749px) {
  .grid-main .size--sidebar {
    margin-bottom: 0;
  }
}

.widget--white {
  padding: 20px;
  border-radius: var(--ol-radius);
  background: var(--ol-surface);
  box-shadow: none;
}

.widget__title {
  overflow: visible;
  margin: 0 0 16px;
  color: var(--ol-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--ol-track-head);
  text-align: left;
  text-transform: none;
}

.widget__title span:before,
.widget__title span:after {
  content: none;
}

/* Facebook page plugin, once the SDK has rendered it (the class is added by the SDK).
   The iframe draws its own square frame; clipping its outer 2px lets our rounded card show
   without changing the plugin's size. Its content sits ~8px from the edge, too tight
   for the 18px card radius. */
.b-side .fb_iframe_widget {
  overflow: hidden;
  border-radius: var(--ol-radius-sm);
  background: var(--ol-surface);
}

.b-side .fb_iframe_widget > span {
  clip-path: inset(2px);
}

/* Advanced Ads image creatives */
.b-side [id^="offic-"] a > img {
  border-radius: var(--ol-radius);
}

/* Follow us */
.widget-social {
  gap: 8px;
  margin-left: 0;
  text-transform: none;
}

.widget-social__link,
.widget-social__link.facebook,
.widget-social__link.twitter {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  padding: 16px 8px 14px;
  border: 0;
  border-radius: var(--ol-radius-sm);
  background: var(--ol-fill);
  color: var(--ol-text);
  transition: background-color .2s var(--ol-ease);
}

.widget-social__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  margin: 0 0 10px;
  line-height: 1;
}

.widget-social__link.facebook .widget-social__icon {
  color: var(--chrome-facebook);
}

.widget-social__link.twitter .widget-social__icon {
  color: var(--chrome-twitter);
}

.widget-social__link.facebook .icon-svg {
  width: 11px;
}

.widget-social__link.twitter .icon-svg {
  width: 24px;
}

.widget-social__count {
  margin: 0 0 4px;
  color: var(--ol-text);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--ol-track-head);
  font-variant-numeric: tabular-nums;
}

.widget-social__desc {
  color: var(--ol-text-2);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ol-track-caps);
  text-transform: uppercase;
  transition: color .2s var(--ol-ease);
}

.no-touchevents .widget-social__link:hover {
  color: var(--ol-text);
  background: var(--ol-fill-2);
  opacity: 1;
}

/* text-2 is only 4.15:1 on fill-2 */
.no-touchevents .widget-social__link:hover .widget-social__desc {
  color: var(--ol-text);
}

/* Monthly best offices */
.widget-articles__item {
  margin: 0 0 12px;
}

.widget-articles__item:last-child {
  margin-bottom: 0;
}

.widget-articles__link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ol-text);
}

.widget-articles__img {
  flex: none;
  float: none;
  width: 112px;
  margin: 0;
  border-radius: var(--ol-radius-sm);
  /* keeps the rounded clip intact while the image scales in Safari */
  isolation: isolate;
}

.widget-articles img {
  transition: transform var(--ol-dur) var(--ol-ease-out);
}

.widget-articles__name {
  min-width: 0;
  padding: 0;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--ol-track-body);
  transition: color .2s var(--ol-ease);
}

.widget-articles__name:before {
  content: none;
}

/* beats the theme's inline "custom color" rule printed after this file */
.no-touchevents .widget-articles .widget-articles__link:hover {
  color: var(--ol-accent);
}

.no-touchevents .widget-articles__link:hover img {
  transform: scale(1.03);
}

/* Newsletter (Mailchimp for WP) */
.b-side .mc4wp-form {
  margin: 0;
  padding: 20px;
  border-radius: var(--ol-radius);
  background: var(--ol-surface);
}

.b-side .mc4wp-form-fields p {
  margin: 0 0 12px;
}

.b-side .mc4wp-form-fields p:last-child {
  margin-bottom: 0;
}

.b-side .mc4wp-form label {
  margin: 0 0 4px;
  color: var(--ol-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--ol-track-head);
}

.b-side .mc4wp-form input[type=email] {
  max-width: none;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid var(--ol-hairline);
  border-radius: var(--ol-radius-sm);
  background: var(--ol-surface);
  /* form-themes.css sets color:#555 !important */
  color: var(--ol-text) !important;
  font-size: 16px;
  line-height: 20px;
  transition: border-color .2s var(--ol-ease), box-shadow .2s var(--ol-ease);
}

.b-side .mc4wp-form input[type=email]::placeholder {
  color: var(--ol-text-2);
  opacity: 1;
}

.b-side .mc4wp-form input[type=email]:focus {
  border-color: var(--ol-accent);
  box-shadow: 0 0 0 4px var(--ol-focus-halo);
}

.b-side .mc4wp-form input[type=submit] {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 11px 20px;
  border: 0;
  border-radius: var(--ol-radius-pill);
  /* form-themes.css paints the blue theme with !important */
  background: var(--ol-accent) !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -.01em;
  transition: background-color .2s var(--ol-ease);
}

.b-side .mc4wp-form input[type=submit]:hover,
.b-side .mc4wp-form input[type=submit]:focus {
  background: var(--ol-accent-hover) !important;
}

.b-side .mc4wp-form input[type=submit]:focus-visible {
  outline: 2px solid var(--ol-accent);
  outline-offset: 2px;
}

.b-side .mc4wp-alert {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.4;
}

.b-side .mc4wp-alert p {
  margin: 0;
}

/* The sidebar is under 260px wide here */
@media (min-width: 750px) and (max-width: 999px) {
  .widget--white,
  .b-side .mc4wp-form {
    padding: 16px;
  }

  /* the full placeholder needs ~138px of text box; the field is 157px wide at 750 */
  .b-side .mc4wp-form input[type=email] {
    padding-right: 8px;
    padding-left: 8px;
  }

  .widget-social {
    gap: 6px;
  }

  .widget-social__link,
  .widget-social__link.facebook,
  .widget-social__link.twitter {
    padding: 14px 4px 12px;
  }

  .widget-social__count {
    font-size: 18px;
  }

  .widget-social__desc {
    font-size: 10px;
    letter-spacing: .04em;
  }

  .widget-articles__item {
    margin-bottom: 20px;
  }

  .widget-articles__link {
    display: block;
  }

  .widget-articles__img {
    width: auto;
    margin: 0 0 10px;
  }
}

@media (min-width: 1000px) {
  /* fluid: keeps ~115px for the title at 1000, ~112px thumbs at 1200+ */
  .widget-articles__img {
    width: 43%;
    height: auto;
  }
}

/* Footer
   ========================================================================== */

.footer {
  border-top: 1px solid var(--ol-separator);
  background: var(--ol-surface);
  color: var(--ol-text-2);
}

.footer__top {
  padding: 48px 0 20px;
  background: none;
  box-shadow: none;
}

.footer__logo {
  margin: 0 0 16px;
}

.footer__logo img {
  display: block;
}

.footer__desc {
  margin: 0 0 32px;
  padding-right: 0;
  max-width: 440px;
  font-size: 14px;
  line-height: 1.55;
}

.footer h3,
.footer h3.footer__title {
  margin: 0 0 12px;
  color: var(--ol-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.003em;
}

.m-footer {
  font-size: 14px;
  font-weight: 400;
}

.m-footer__item {
  margin: 0 0 8px;
}

.m-footer__link {
  width: fit-content;
  color: var(--ol-text-2);
  line-height: 20px;
}

.m-footer__link:focus-visible {
  border-radius: 4px;
}

.no-touchevents .m-footer__link:hover {
  color: var(--ol-text);
  text-decoration: underline;
}

.footer__bottom {
  padding: 0 0 32px;
  background: none;
}

.footer__copyright {
  padding: 16px 0 0;
  border-top: 1px solid var(--ol-separator);
  color: var(--ol-text-2);
  font-size: 12px;
  line-height: 16px;
}

/* 32px tap targets; the list margins absorb the 6px padding so the text keeps
   its 12px gap under the title and 28px before the next block */
@media (max-width: 749px) {
  .m-footer__list {
    margin: -6px 0 22px;
  }

  .m-footer__item {
    margin: 0;
  }

  .m-footer__link {
    padding: 6px 0;
  }
}

@media (min-width: 750px) {
  .footer__top {
    padding: 56px 0 40px;
  }

  .footer__desc {
    margin: 0;
    padding-right: 40px;
  }
}

/* Twitter -> X (header + share buttons) */
:root {
  --ol-x-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

.m-social .icon-svg--tw {
  position: relative;
  filter: none;
  background: var(--ol-text-3);
  transition: background-color .25s ease;
}

.m-social .icon-svg--tw svg {
  display: none;
}

.m-social .icon-svg--tw::after {
  content: "";
  position: absolute;
  inset: 19%;
  background: #fff;
  -webkit-mask: var(--ol-x-glyph) center / contain no-repeat;
  mask: var(--ol-x-glyph) center / contain no-repeat;
}

.no-touchevents .m-social__link:hover .icon-svg--tw {
  background: #000;
}

.b-content .social-likes__widget_twitter .icon-svg {
  position: relative;
  width: 12px;
  color: #000;
}

.b-content .social-likes__widget_twitter .icon-svg::before {
  padding-top: 100%;
}

.b-content .social-likes__widget_twitter .icon-svg svg {
  display: none;
}

.b-content .social-likes__widget_twitter .icon-svg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: var(--ol-x-glyph) center / contain no-repeat;
  mask: var(--ol-x-glyph) center / contain no-repeat;
}