/* Radiant Reach design layer for drsinyong.com, 12 Nov 2026.
   Additive only: loaded after the site CSS. Remove the <link> (or this file) to undo. */

/* ---------- Readability: thin grey body copy gets more weight and contrast (class set by rr-enhance.js) ---------- */
.rr-legible{color:#cfc8bc!important;font-weight:400!important}
.rr-legible a{color:inherit}
::selection{background:rgba(201,169,110,.85);color:#0a0a0b}
:focus-visible{outline:2px solid #c9a96e;outline-offset:3px;border-radius:2px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- Reading progress bar on long pages ---------- */
.rr-prog{position:fixed;left:0;top:0;height:2px;width:100%;z-index:10000;pointer-events:none;
  background:linear-gradient(90deg,#8a6d3b,#c9a96e 60%,#f1dcae);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- Scroll reveal (only for content below the fold at load) ---------- */
.rr-rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rr-rv.rr-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rr-rv{opacity:1;transform:none;transition:none}}

/* ---------- Hero: slow drift on the hero photograph ---------- */
@keyframes rr-drift{from{transform:scale(1.001)}to{transform:scale(1.06)}}
.hero .hero-bg-img{animation:rr-drift 24s ease-out both}
@media (prefers-reduced-motion:reduce){.hero .hero-bg-img{animation:none}}

/* ---------- Signature-concern cards: depth on hover, no dead space ---------- */
.sb-grid{align-items:start}
.sb-card{transition:border-color .35s,transform .35s,box-shadow .35s,background-color .35s}
.sb-card:hover{border-color:rgba(201,169,110,.55)!important;transform:translateY(-3px);
  box-shadow:0 18px 40px -22px rgba(201,169,110,.35);background-color:rgba(201,169,110,.035)}
@media (prefers-reduced-motion:reduce){.sb-card:hover{transform:none}}

/* ---------- Gold shimmer on the hero's italic word ---------- */
@keyframes rr-sheen{0%{background-position:120% 0}100%{background-position:-20% 0}}
.hero h1 em{background:linear-gradient(100deg,#c9a96e 30%,#f6e4bb 45%,#c9a96e 60%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rr-sheen 5s 1.2s ease-in-out 2 both}
@media (prefers-reduced-motion:reduce){.hero h1 em{animation:none}}

/* ---------- Face map (home page) ---------- */
.rr-fm{padding:88px 0 72px;position:relative;border-top:1px solid rgba(201,169,110,.14);border-bottom:1px solid rgba(201,169,110,.14);
  background:radial-gradient(60% 70% at 22% 45%,rgba(201,169,110,.07),transparent 70%)}
.rr-fm-in{max-width:1180px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:minmax(260px,420px) 1fr;grid-template-areas:'art head' 'art copy';column-gap:64px;align-items:center}
.rr-fm-head{grid-area:head;align-self:end}.rr-fm-art{grid-area:art}.rr-fm-copy{grid-area:copy;align-self:start}
.rr-fm-head .sb-h{margin:0}
.rr-fm-art{position:relative}
.rr-fm-art svg{width:100%;height:auto;display:block;overflow:visible}
.rr-fm .fm-l{fill:none;stroke:#c9a96e;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.rr-fm .fm-s{opacity:.45}
.rr-fm.rr-draw .fm-l{stroke-dasharray:900;stroke-dashoffset:900;animation:rr-line 2.6s cubic-bezier(.4,.1,.2,1) forwards}
@keyframes rr-line{to{stroke-dashoffset:0}}
.rr-fm .fm-dot{cursor:pointer;outline:none}
.rr-fm .fm-core{fill:#c9a96e;transition:r .25s,fill .25s}
.rr-fm .fm-ring{fill:rgba(201,169,110,.12);stroke:rgba(201,169,110,.55);stroke-width:1;transform-box:fill-box;transform-origin:center;
  animation:rr-pulse 2.8s ease-out infinite}
.rr-fm .fm-dot:nth-of-type(3n) .fm-ring{animation-delay:.9s}
.rr-fm .fm-dot:nth-of-type(3n+1) .fm-ring{animation-delay:1.8s}
@keyframes rr-pulse{0%{transform:scale(.55);opacity:1}80%,100%{transform:scale(1.35);opacity:0}}
.rr-fm .fm-dot.on .fm-core,.rr-fm .fm-dot:hover .fm-core,.rr-fm .fm-dot:focus-visible .fm-core{fill:#f6e4bb;r:8}
.rr-fm .fm-dot.on .fm-ring,.rr-fm .fm-dot:hover .fm-ring,.rr-fm .fm-dot:focus-visible .fm-ring{animation:none;transform:scale(1.15);opacity:1;fill:rgba(201,169,110,.22);stroke:#f6e4bb}
.rr-fm-tip{margin:14px 0 0;text-align:center;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#a39d93;min-height:1.5em}
.rr-fm-tip span{color:#c9a96e}
.rr-fm-lead{color:#cfc8bc;font-size:16px;line-height:1.75;font-weight:400;max-width:620px;margin:14px 0 26px}
.rr-fm-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;counter-reset:none}
.rr-fm-list li{border-top:1px solid rgba(201,169,110,.16)}
.rr-fm-list a{display:flex;gap:14px;align-items:baseline;padding:12px 6px;text-decoration:none!important;color:#f5f0e8!important;transition:background-color .25s,padding .25s}
.rr-fm-list a:hover,.rr-fm-list a.on,.rr-fm-list a:focus-visible{background:rgba(201,169,110,.07);padding-left:12px}
.rr-fm-list a:hover b,.rr-fm-list a.on b{color:#c9a96e}
.rr-fm-all,.rr-fm-btn{text-decoration:none!important}
.rr-fm-list .fm-n{font-family:"Cormorant Garamond",serif;font-style:italic;color:#c9a96e;font-size:17px;min-width:22px}
.rr-fm-list .fm-t{display:flex;flex-direction:column;gap:2px}
.rr-fm-list b{color:#f5f0e8;font-family:"Cormorant Garamond",serif;font-weight:500;font-size:20px;line-height:1.2;letter-spacing:.2px}
.rr-fm-list small{font-size:13px;color:#a39d93!important;font-weight:400;line-height:1.45}
.rr-fm-cta{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-top:30px}
.rr-fm-btn{display:inline-flex;align-items:center;gap:10px;background:#c9a96e;color:#0a0a0b!important;text-decoration:none;font-size:12.5px;font-weight:500;
  letter-spacing:1.6px;text-transform:uppercase;padding:15px 24px;border-radius:2px;transition:background-color .25s,transform .25s}
.rr-fm-btn:hover{background:#dcc08a;transform:translateY(-1px)}
.rr-fm-all{color:#c9a96e;font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(201,169,110,.5);padding-bottom:3px}
@media (max-width:900px){
  .rr-fm{padding:60px 0 52px}
  .rr-fm-in{grid-template-columns:1fr;grid-template-areas:'head' 'art' 'copy';row-gap:22px;padding:0 20px}
  .rr-fm-art{max-width:320px;margin:0 auto;width:100%}
}
@media (max-width:560px){.rr-fm-list{grid-template-columns:1fr}.rr-fm-list b{color:#f5f0e8;font-size:19px}}
@media (prefers-reduced-motion:reduce){.rr-fm .fm-ring{animation:none}.rr-fm.rr-draw .fm-l{animation:none;stroke-dashoffset:0}}

/* ---------- Safety: inline aspect-ratio images must not be stretched by their height attribute ---------- */
img[style*="aspect-ratio"]:not([style*="height"]){height:auto}