/* Local article adjustments layered over the 24 September production template. */
.review-ribbon{background:var(--fg-surface,rgba(250,248,242,.62));border-bottom:1px solid #adc2d1;color:#183d69;text-align:center;padding:9px 18px;font:600 13px/1.45 Manrope,sans-serif}
.ar-head .ar-head-inner{max-width:1160px}
.ar-head.pv-head .ar-head-inner{grid-template-columns:minmax(0,1fr);gap:0}
.ar-head .ar-head-text{width:100%;max-width:none}
.ar-head h1{font-family:Manrope,sans-serif;font-weight:650;letter-spacing:-.035em;text-wrap:balance;max-width:none}
.ar-head h1 .title-short{display:none}
.ar-head .lead{font:400 20px/1.62 Manrope,sans-serif;max-width:1100px}
.ar-body{font:400 18px/1.72 Manrope,sans-serif;min-width:0}
.ar-body p,.ar-body li{font-size:18px;line-height:1.72}
.ar-body h2{font-family:Manrope,sans-serif;font-weight:650;letter-spacing:-.025em;text-wrap:balance;max-width:none}
.ar-body .ar-section{scroll-margin-top:100px}
.ar-body .ar-section p:first-of-type{font-size:18px;line-height:1.72}
.ar-contents a[aria-current="location"]{font-weight:750;color:#183d69;background:rgba(255,253,248,.92);border-radius:7px}
.macula-pair,.oct-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:30px 0 42px}
.ar-body .macula-panel,.ar-body .oct-panel{margin:0;min-width:0}
.macula-panel img{width:100%;aspect-ratio:1;object-fit:contain;background:#f6f5ef;border-radius:12px;mix-blend-mode:multiply}
.ar-body figcaption{font:400 15px/1.55 Manrope,sans-serif;color:#425c72;margin-top:10px}
.ar-body figcaption strong{color:#183d69}
.oct-frame{position:relative;background:#030303;border-radius:10px;overflow:hidden}
.oct-frame img{display:block;width:100%;height:auto}
.oct-annotation{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.oct-annotation text{fill:#fff;font:700 34px Manrope,sans-serif;paint-order:stroke fill;stroke:#02080f;stroke-width:2px;stroke-linejoin:round}
.oct-panel:nth-child(2) .oct-annotation text{font-size:27px}
.oct-annotation>path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.symptom-figure{margin:30px 0 38px}
.distortion-compare{position:relative;aspect-ratio:5/3;overflow:hidden;border-radius:12px;background:var(--fg-surface,rgba(250,248,242,.62));max-width:780px}
.distortion-base,.distortion-affected{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.distortion-affected{clip-path:inset(0 0 0 52%)}
.distortion-handle{position:absolute;left:var(--divide,52%);top:0;bottom:0;width:2px;background:#fff;transform:translateX(-1px);pointer-events:none;z-index:1;box-shadow:0 0 0 1px #0002}
.distortion-handle span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#183d69;font:700 22px/1 Manrope,sans-serif;box-shadow:0 4px 12px #0004}
.distortion-compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:.01;cursor:ew-resize;z-index:2}
.distortion-compare input:focus-visible~.distortion-handle span{box-shadow:0 0 0 3px #fff,0 0 0 6px #285581}
.compare-label{position:absolute;bottom:12px;background:#f6f5efee;color:#183d69;padding:5px 9px;border-radius:6px;font:700 13px/1.2 Manrope,sans-serif;z-index:1}
.compare-label.left{left:12px}.compare-label.right{right:12px}
.ar-body a{color:#235b7a;text-underline-offset:3px}
.ar-related{margin:50px 0;padding:22px 25px;background:var(--fg-surface,rgba(250,248,242,.62));border:1px solid #b8cbd8;border-radius:12px}
.ar-related h2{font-size:23px;margin:0 0 12px}.ar-related p{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.ar-related a{display:inline-flex;padding:7px 13px;background:#fff;border-radius:24px;text-decoration:none;font-size:15px}
@media(max-width:760px){.ar-head h1 .title-full{display:none}.ar-head h1 .title-short{display:inline}.macula-pair,.oct-pair{grid-template-columns:1fr;gap:24px}.macula-panel img{max-height:640px}.ar-body p,.ar-body li{font-size:17px}.ar-body .ar-section p:first-of-type{font-size:17px}}
@media(max-width:390px){.ar-head h1{font-size:32px}.ar-head .lead{font-size:18px}}
/* No translated version of this draft exists. */
.language-menu,.menu-language{display:none!important}
.decision-table{width:100%;border-collapse:collapse;margin:24px 0 32px;background:#fffdf9;border:1px solid #b5c8d3}
.decision-table caption{text-align:left;font:650 16px/1.4 Manrope,sans-serif;color:#183d69;margin-bottom:8px}
.decision-table th,.decision-table td{width:50%;padding:12px 15px;text-align:left;vertical-align:top;border:1px solid #b5c8d3;font:400 16px/1.5 Manrope,sans-serif}
.decision-table th{background:rgba(243,230,196,.5);font-weight:700}
@media(max-width:560px){.decision-table,.decision-table thead,.decision-table tbody,.decision-table tr,.decision-table th,.decision-table td{display:block;width:100%}.decision-table tr{border-bottom:1px solid #b5c8d3}.decision-table th{border-bottom:0}.decision-table td{border-top:0}}
@media(max-width:560px){.ar-body .decision-table,.ar-body .decision-table thead,.ar-body .decision-table tbody,.ar-body .decision-table tr,.ar-body .decision-table th,.ar-body .decision-table td{width:100%!important;max-width:100%!important;min-width:0!important}}
@media(max-width:560px){.ar-body .decision-table thead,.ar-body .decision-table tr,.ar-body .decision-table th{width:calc(100vw - 34px)!important;box-sizing:border-box!important}}
.surgery-video{margin:32px 0 38px;max-width:800px}
.surgery-video h3{font:650 22px/1.35 Manrope,sans-serif;margin:0 0 8px}
.surgery-video>p{margin:0 0 16px}
.surgery-video .video-boxes{max-width:none!important}
.surgery-video .vid-box{gap:11px!important}
.surgery-video .yt-stage,.surgery-video .yt-live{width:100%;aspect-ratio:16/9}
.surgery-video .yt-live iframe{display:block;width:100%;height:100%;border:0}

/* 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}}