/* defocus figures, 2026-09-22 */.df-grid{display:grid;gap:14px;grid-template-columns:1fr;margin:0} @media (min-width:620px){.df-grid{grid-template-columns:1fr 1fr;gap:16px}} .df-card{background:#fff;border:1px solid rgba(24,61,105,.16);border-radius:14px; padding:14px 14px 8px;display:flex;flex-direction:column} .df-card-head{margin:0;font-size:16px;font-weight:700;color:#183d69; line-height:1.3} .df-card-note{margin:2px 0 10px;font-size:14px;line-height:1.5;color:#5a7091} .df-card svg{margin-top:auto} @media (min-width:620px){.df-card-note{min-height:42px}} .df-wide{display:none} @media (min-width:620px){.df-wide{display:block}} .df-narrow{display:block} @media (min-width:620px){.df-narrow{display:none}} .df-frame{background:#fff;border:1px solid rgba(24,61,105,.16);border-radius:16px; padding:14px 12px 10px}
.dd-frame{position:relative}.dd-labels{position:absolute;inset:0;pointer-events:none}.dd-labels span{position:absolute;top:calc(5.1% + 12px);display:inline-block;padding:5px 14px;border-radius:999px;background:rgba(248,250,251,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(24,61,105,.14);color:#183d69;font-weight:600;font-size:15px;line-height:1.3;letter-spacing:.01em}.dd-labels span:nth-child(1){left:calc(1.6% + 12px)}.dd-labels span:nth-child(2){left:calc(34.1% + 12px)}.dd-labels span:nth-child(3){left:calc(67.1% + 12px)}@media (max-width:700px){.dd-labels span{top:calc(5.1% + 6px);padding:2px 8px;font-size:12px}.dd-labels span:nth-child(1){left:calc(1.6% + 6px)}.dd-labels span:nth-child(2){left:calc(34.1% + 6px)}.dd-labels span:nth-child(3){left:calc(67.1% + 6px)}}
/* Phone header and quick bar, 25 September 2026. Loaded last on every page
   that carries the mobile quick bar. Gated by html classes hr-hd1 / hr-q4. */

/* hd1  A larger name and iris on phones, with a tighter stack.
   The phone header row is already full (brand 182 + search 40 + language 57 +
   menu 48 + gaps = 339px at 375px), so the larger lock-up is paid for by 6px
   off the search button width and the language pill's side padding. The tagline
   stays at 12px: at 12.5px it wraps and the row breaks. */
@media (max-width:760px){
  html.hr-hd1 header{row-gap:2px!important;padding-bottom:6px!important}
  html.hr-hd1 header .brand{gap:8px!important}
  html.hr-hd1 header .brand img{width:34px!important;height:34px!important}
  html.hr-hd1 header .brand span{font-size:16.5px!important;line-height:1.22!important}
  html.hr-hd1 header .brand span small{font-size:12px!important;line-height:1.3!important}
  html.hr-hd1 header details.language-menu>summary{padding-left:6px!important;padding-right:6px!important}
  html.hr-hd1 header button.site-search-trigger{width:34px!important;min-width:34px!important;padding:0!important}
}
@media (max-width:360px){
  html.hr-hd1 header .brand img{width:31px!important;height:31px!important}
  html.hr-hd1 header .brand span{font-size:15.5px!important}
}

/* q4  Four buttons in the phone bar: Home, Dr Chen, Articles, Contact.
   Same 13px labels and 52px targets as the published three. */
.qn-articles{display:none!important}
html.hr-q4 .mobile-quick-nav .qn-articles{display:flex!important}
html.hr-q4 .mobile-quick-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important}
html.hr-q4 .mobile-quick-nav>a{min-width:0;padding-left:4px!important;padding-right:4px!important}
html.hr-q4 .mobile-quick-nav>a>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.qn-short{display:none}
html.hr-q4 .mobile-quick-nav .qn-long{display:none}
html.hr-q4 .mobile-quick-nav .qn-short{display:inline}

div.ar-author>img[src*="headshot-avatar"]{width:80px!important;height:80px!important;min-width:80px!important;flex:0 0 80px!important;object-fit:cover!important;object-position:50% 50%!important;border-radius:50%!important;background:#fbfbfb!important}@media (max-width:700px){div.ar-author>img[src*="headshot-avatar"]{width:72px!important;height:72px!important;min-width:72px!important;flex:0 0 72px!important}}