:root {
  --oph-blue: #6bb6dc;
  --oph-blue-deep: #327aa0;
  --oph-blue-soft: #e9f6fb;
  --oph-ink: #20322d;
  --oph-paper: #fffaf2;
  --oph-line: rgba(50, 122, 160, .2);
}

.ophthalmology-page { background: var(--oph-paper); color: var(--oph-ink); }
.ophthalmology-page .site-header { background: rgba(255, 250, 242, .92); }
.oph-category-hero,
.oph-detail-hero { position: relative; display: grid; min-height: 84svh; overflow: hidden; background: radial-gradient(circle at 78% 38%, rgba(255,255,255,.5) 0 12%, transparent 12.5%), radial-gradient(circle at 78% 38%, transparent 0 24%, rgba(255,255,255,.25) 24.5% 25%, transparent 25.5%), linear-gradient(135deg, #f8fcfd 0%, #dff1f8 48%, #6bb6dc 100%); }
.oph-detail-hero { min-height: 76svh; }
.oph-hero-orbit { position: absolute; right: -8vw; top: 14%; width: min(50vw, 720px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.56); border-radius: 50%; box-shadow: 0 0 0 92px rgba(255,255,255,.09), 0 0 0 184px rgba(255,255,255,.05); }
.oph-category-hero-inner,
.oph-detail-hero-inner { position: relative; z-index: 1; width: min(1180px, calc(100% - 40px)); margin: auto; padding: 150px 0 100px; }
.oph-category-hero-inner > p:not(.eyebrow),
.oph-detail-hero-inner > p:not(.eyebrow) { max-width: 720px; color: rgba(32,50,45,.78); font-size: clamp(1.04rem, 1.65vw, 1.32rem); line-height: 1.72; }
.oph-category-hero h1,
.oph-detail-hero h1 { max-width: 900px; margin: 22px 0 26px; color: var(--oph-ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.7rem, 8vw, 8rem); font-weight: 500; letter-spacing: -.055em; line-height: .88; }
.oph-category-hero h1 em { color: var(--oph-blue-deep); font-weight: 500; }
.oph-detail-hero h1 { font-size: clamp(3.5rem, 7vw, 7.2rem); }
.oph-detail-subtitle { margin-top: -8px; color: var(--oph-blue-deep) !important; font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.oph-medical-notice { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(220px,.4fr) 1fr; gap: 24px; width: min(1180px, calc(100% - 40px)); margin: -42px auto 0; padding: 28px 34px; border: 1px solid var(--oph-line); border-radius: 12px; background: rgba(255,250,242,.96); box-shadow: 0 20px 54px rgba(50,122,160,.12); }
.oph-medical-notice strong { color: var(--oph-blue-deep); font-size: .82rem; letter-spacing: .12em; line-height: 1.6; text-transform: uppercase; }
.oph-medical-notice p { margin: 0; color: rgba(32,50,45,.72); line-height: 1.65; }
.oph-category-intro { padding-top: clamp(100px, 11vw, 160px); }
.oph-category-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; max-width: 1240px; margin: 54px auto 0; }
.oph-category-card { display: flex; min-height: 520px; flex-direction: column; padding: clamp(28px,4vw,52px); border: 1px solid var(--oph-line); border-radius: 14px; background: rgba(255,255,255,.52); color: var(--oph-ink); box-shadow: 0 22px 62px rgba(50,122,160,.08); transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease; }
.oph-category-card:hover { transform: translateY(-6px); background: #fff; box-shadow: 0 28px 72px rgba(50,122,160,.16); }
.oph-card-index { color: var(--oph-blue); font-family: Georgia,serif; font-size: 4rem; line-height: 1; }
.oph-category-card .eyebrow { margin-top: auto; }
.oph-category-card h3 { margin: 18px 0; font-family: Georgia,serif; font-size: clamp(2rem,3vw,3.1rem); font-weight: 500; line-height: 1; }
.oph-category-card > p:not(.eyebrow) { color: rgba(32,50,45,.72); line-height: 1.7; }
.oph-category-card strong { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--oph-line); color: var(--oph-blue-deep); }
.oph-section-nav { position: sticky; z-index: 8; top: 72px; overflow-x: auto; border-block: 1px solid var(--oph-line); background: rgba(255,250,242,.95); backdrop-filter: blur(18px); }
.oph-section-nav > div { display: flex; width: max-content; min-width: 100%; max-width: 1440px; margin: 0 auto; }
.oph-section-nav a { display: grid; min-width: 145px; gap: 3px; padding: 16px 20px; border-right: 1px solid var(--oph-line); color: rgba(32,50,45,.72); font-size: .78rem; font-weight: 800; }
.oph-section-nav a:hover { background: var(--oph-blue-soft); color: var(--oph-blue-deep); }
.oph-section-nav a span { color: var(--oph-blue); font-size: .66rem; letter-spacing: .16em; }
.oph-document { padding: clamp(70px,8vw,120px) 20px; }
.oph-content-section { display: grid; grid-template-columns: 120px minmax(0,880px); gap: clamp(28px,5vw,72px); justify-content: center; padding: clamp(54px,7vw,96px) 0; border-bottom: 1px solid var(--oph-line); scroll-margin-top: 150px; }
.oph-section-number { position: sticky; top: 170px; align-self: start; color: rgba(107,182,220,.42); font-family: Georgia,serif; font-size: clamp(3.5rem,7vw,6.5rem); line-height: .9; }
.oph-source-copy > .eyebrow { color: var(--oph-blue-deep); }
.oph-source-copy > h2 { margin: 14px 0 42px; font-family: Georgia,serif; font-size: clamp(2.5rem,5vw,4.8rem); font-weight: 500; letter-spacing: -.04em; line-height: .95; }
.oph-source-copy h3 { margin: 0 0 24px; color: var(--oph-ink); font-family: Georgia,serif; font-size: clamp(1.65rem,3vw,2.55rem); font-weight: 500; line-height: 1.18; }
.oph-source-copy p { margin: 0 0 20px; color: rgba(32,50,45,.79); font-size: 1.02rem; line-height: 1.78; }
.oph-source-copy ul { display: grid; gap: 12px; margin: 24px 0 34px; padding: 0; list-style: none; }
.oph-source-copy li { position: relative; padding: 14px 18px 14px 42px; border: 1px solid rgba(50,122,160,.13); border-radius: 8px; background: rgba(233,246,251,.52); color: rgba(32,50,45,.8); line-height: 1.6; }
.oph-source-copy li::before { position: absolute; left: 17px; top: 17px; color: var(--oph-blue-deep); content: "•"; font-size: 1.25rem; }
.source-subheading { margin: 30px 0 12px; color: var(--oph-ink); font-size: 1rem; letter-spacing: .05em; line-height: 1.5; }
.source-question { padding-top: 22px; border-top: 1px solid var(--oph-line); font-family: Georgia,serif; font-size: 1.28rem; letter-spacing: 0; }
.source-callout-heading { margin: 38px 0 18px; padding: 22px 24px; border-left: 4px solid var(--oph-blue); background: var(--oph-blue-soft); color: var(--oph-blue-deep); font-size: .82rem; letter-spacing: .14em; line-height: 1.6; text-transform: uppercase; }
.source-callout-heading-alert { border-color: #d9784b; background: #fff1ea; color: #a34b24; }
.oph-related-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; max-width: 1060px; margin: 48px auto 0; }
.oph-related-card { display: grid; gap: 12px; min-height: 260px; padding: 34px; border: 1px solid var(--oph-line); border-radius: 12px; background: rgba(255,255,255,.5); color: var(--oph-ink); }
.oph-related-card > span { color: var(--oph-blue); font-family: Georgia,serif; font-size: 2.8rem; }
.oph-related-card p { margin: auto 0 0; color: var(--oph-blue-deep); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.oph-related-card h3 { margin: 0; font-family: Georgia,serif; font-size: 2rem; font-weight: 500; }
.oph-related-card small { color: rgba(32,50,45,.62); }
.oph-coordination { padding: clamp(90px,12vw,160px) 20px; background: linear-gradient(135deg,#327aa0,#6bb6dc); color: white; }
.oph-coordination > div { max-width: 980px; margin: 0 auto; }
.oph-coordination .eyebrow { color: rgba(255,255,255,.75); }
.oph-coordination h2 { max-width: 880px; margin: 18px 0 24px; font-family: Georgia,serif; font-size: clamp(2.8rem,6vw,5.8rem); font-weight: 500; letter-spacing: -.045em; line-height: .95; }
.oph-coordination p:not(.eyebrow) { max-width: 760px; color: rgba(255,255,255,.82); font-size: 1.08rem; line-height: 1.72; }
.oph-coordination .button-secondary { border-color: rgba(255,255,255,.42); color: white; }

@media (max-width: 980px) {
  .oph-category-grid { grid-template-columns: 1fr; }
  .oph-category-card { min-height: 420px; }
  .oph-content-section { grid-template-columns: 72px minmax(0,1fr); gap: 24px; }
  .oph-section-number { font-size: 3.5rem; }
}

@media (max-width: 700px) {
  .oph-category-hero,
  .oph-detail-hero { min-height: 78svh; }
  .oph-category-hero-inner,
  .oph-detail-hero-inner { width: min(100% - 32px,1180px); padding: 122px 0 76px; }
  .oph-category-hero h1,
  .oph-detail-hero h1 { font-size: clamp(3.1rem,15vw,5rem); }
  .oph-hero-orbit { right: -38vw; width: 108vw; }
  .oph-medical-notice { grid-template-columns: 1fr; width: calc(100% - 32px); margin-top: -24px; padding: 24px; }
  .oph-section-nav { top: 64px; }
  .oph-content-section { grid-template-columns: 1fr; padding: 58px 0; }
  .oph-section-number { position: static; font-size: 3rem; }
  .oph-source-copy > h2 { margin-bottom: 30px; }
  .oph-related-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .oph-category-card { transition: none; }
}