@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');

:root {
  --navy:#554538;
  --ink:#292723;
  --teal:#6c5745;
  --blue:#715d4b;
  --muted:#6c6257;
  --line:#e8e0d5;
  --pale:#f4ede3;
  --studio-canvas:#f8f7f4;
  --studio-champagne:#e8dac7;
  --studio-font:"DM Sans","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
body { color:var(--ink); background:var(--studio-canvas); font-family:var(--studio-font); }
html[lang=th] body,
html[lang=th] .language-tabs a[lang=th],
html[lang=th] .navlinks a[lang=th] { font-family:ClinicThai,var(--studio-font); }
h1,h2,h3 { letter-spacing:-.045em; }
h1,h2 { font-weight:800; text-wrap:balance; }
.topbar { background:#eee5d9; color:#514234; }
.topbar a { color:#514234; font-weight:700; }
.header { background:#fffdfaf7; }
.nav { min-height:94px; }
.nav-clinical a:nth-child(-n+2) { color:#594838; }
.navlinks a[aria-current=page] { text-decoration:underline; text-underline-offset:5px; }
.page-title { background:linear-gradient(105deg,#f6efe6,#f0e6d8); }
.page-title h1 { margin-bottom:.28em; }
.page-title p { max-width:64ch; line-height:1.7; }
.button { border-radius:8px; }
.button:hover { background:#544231; }
.button.secondary:hover { color:#594838; background:#f7efe4; }
.textlink { text-decoration-color:#bba48c; }
.article { line-height:1.78; }
.article p,.article ul,.article ol { margin-bottom:1em; }
.article li + li { margin-top:.42em; }
.article h2,.article h3 { line-height:1.43; }
.article h2 { margin-bottom:.55em; }
.article :is(.clinical-section,.related-eye-video) { margin-bottom:28px; padding-bottom:25px; }
.article .clinical-section > :last-child { margin-bottom:0; }
.article > .section { padding-block:28px; }
.article .actions { row-gap:8px; }
.article .article-meta { row-gap:5px; }
.article .faq details { padding-block:13px; }
.article .faq details > p { margin-top:.65em; }
.article .faq details > p:last-child { margin-bottom:.35em; }
.article .original { overflow-wrap:anywhere; }
.article-layout { gap:clamp(28px,4vw,56px); }
.table-wrap { background:#fff; margin-block:16px 22px; }
.data-table :is(th,td) { vertical-align:top; }
.table-hint { display:none; }
.eyebrow,.article-meta,.toc-disclosure nav { color:var(--muted); }
.care-path,.treatment,.equipment-detail,.equipment > article,
.eye-video-card,.doctor-info,.references,.side,.sourcebox { background:#fff; }
.footer { background:#ede6db; color:#5d5044; }
.mobilebar a:first-child { background:#6c5745; color:#fff; }
.surface-block,.dryeye-option,.iol-feature-card,.retina-procedure-card { border-color:var(--line); }
.data-table th,.disease-illustration figcaption,.directory-item img,.directory-placeholder { background:#f7f1e9; }
.iol-feature-card figcaption,.iol-maker,.retina-procedure-card figcaption { color:var(--muted); }
.iol-design,.retina-purpose { color:var(--teal); }
.iol-concept-note,.retina-process li,.retina-process-intro,
.surface-overlap,.surface-jump a { background:var(--pale); }
.iol-concept-note { border-left-color:#987c60; }
.retina-process li::before { background:var(--teal); }
.surface-jump a { color:var(--teal); }
.visit-simple { color:var(--ink); }
.visit-simple h2,.visit-hours dd { color:var(--ink); }
.visit-jump a,.visit-hours { background:var(--pale); color:var(--ink); }
.visit-jump a:hover { background:#eae0d2; color:#594838; }
.visit-more summary > span,.visit-detail-body a { color:var(--teal); }
#stmaryeye-editorial-footer { background:#ede6db; color:#5d5044; font-family:var(--studio-font); }

@media(max-width:1000px) {
  .nav { min-height:78px; }
  .article-layout { gap:25px; }
}
@media(max-width:760px) {
  .nav { min-height:72px; }
  .page-title { padding-bottom:25px; }
  .page-title h1 { text-wrap:initial; }
  .page-body { padding-top:23px; }
  .article .table-hint { display:block; margin:0 0 6px; font-size:13px; line-height:1.5; }
  .article .table-hint + .table-wrap { margin-top:7px; }
  .data-table :is(th,td) { padding:11px 12px; }
  .article > .section { padding-block:19px; }
  .article :is(.clinical-section,.related-eye-video) { margin-bottom:22px; padding-bottom:18px; }
  .article p,.article li { line-height:1.72; }
  .visit-contact .button { white-space:normal; }
  .eye-video-card h2 { line-height:1.44; }
}
@media(max-width:420px) {
  .container { padding-inline:17px; }
  .article-layout { gap:18px; }
  .side { padding-inline:13px; }
  .article .alert { padding:15px; }
}

/* The standalone, unlisted video preview has its own base layout. */
body.clip-preview { background:var(--studio-canvas); color:var(--ink); }
.clip-preview :is(.intro,.help) { color:var(--muted); }
.clip-preview video { box-shadow:0 8px 30px #59483820; }
.clip-preview .button { background:var(--teal); color:#fff; }
.clip-preview .button.secondary { background:#fff; border-color:var(--line); color:var(--ink); }
.clip-preview a:focus-visible { outline-color:var(--teal); }