:root {
  --font:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text:#252c29; --muted:#626b65; --accent:#315d4c;
  --bg:#fafbf9; --surface:#fff; --line:#dfe5df; --soft:#eef3ee;
  --radius:10px; --content:800px; --rail:320px; --layout:1280px;
  --body-size:18px; --leading:1.75;
  --inline-ad-height:250px; --mobile-ad-height:180px;
  --rail-ad-height:300px; --bottom-ad-height:250px; --rail-gap:32px;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:24px }
body { margin:0; background:var(--bg); color:var(--text); font:var(--body-size)/var(--leading) var(--font) }
a { color:var(--accent); text-underline-offset:4px; text-decoration-thickness:1px }
a:hover { text-decoration-thickness:2px }
a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid #9b6d2d; outline-offset:4px }
button,input { font:inherit }
button { cursor:pointer; border:1px solid var(--accent); border-radius:7px; padding:8px 18px; background:var(--accent); color:#fff; font-size:15px; font-weight:600 }
input { min-width:0; border:1px solid #d3dbd3; border-radius:7px; padding:8px 14px; background:var(--bg); color:var(--text) }
input::placeholder { color:#747c76 }
.sr-only,.skip-link:not(:focus) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
.skip-link:focus { position:fixed; z-index:10; top:8px; left:8px; background:white; padding:12px }
.site-header { border-bottom:1px solid var(--line); background:var(--surface) }
.header-inner { max-width:var(--layout); margin:auto; padding:19px 48px; display:flex; align-items:center; gap:28px }
.brand { font-family:Georgia,"Times New Roman",serif; font-size:28px; letter-spacing:-.055em; font-weight:700; text-decoration:none; color:var(--text); white-space:nowrap }
.search-form { display:flex; gap:7px; margin-left:auto; width:440px; max-width:100% }
.search-form input { flex:1; width:0; font-size:15px }
.site-container { max-width:var(--layout); padding:30px 48px 0; margin:0 auto }
.breadcrumbs { font-size:13px; color:var(--muted); margin-bottom:32px }
.breadcrumbs ol { display:flex; flex-wrap:wrap; gap:6px 10px; list-style:none; padding:0; margin:0 }
.breadcrumbs li { margin:0 }
.breadcrumbs a { color:var(--muted); text-decoration:none }
.breadcrumbs li:not(:last-child)::after { content:" /"; padding-left:8px; color:#a5ada5 }
.article-layout { display:block }
.article-layout.with-rail { display:grid; grid-template-columns:minmax(0,var(--content)) var(--rail); gap:48px; align-items:stretch }
.article-body { min-width:0; max-width:var(--content); margin:auto }
.with-rail .article-body { margin:0 }
.right-rail { position:relative; width:var(--rail); min-width:0; contain:size }
.rail-stack { position:absolute; inset:0; display:grid; grid-template-rows:repeat(auto-fill,minmax(calc(var(--rail-ad-height) + var(--rail-gap)),1fr)); grid-auto-rows:0; overflow:hidden }
.rail-cell { min-height:0; overflow:hidden }
.rail-cell .rail-ad { height:calc(100% - var(--rail-gap)); min-height:0 }
.directory-layout { margin-top:0 }
.directory-body { display:flow-root }
.directory-body h1 { margin-top:24px }
h1,h2,h3 { line-height:1.23; letter-spacing:-.025em; overflow-wrap:anywhere }
h1 { font-size:42px; margin:0 0 26px; font-weight:700; max-width:760px }
h2 { font-size:29px; margin:46px 0 20px; font-weight:680 }
h3 { font-size:22px; margin:30px 0 14px }
p { margin:0 0 20px; overflow-wrap:anywhere }
li { margin:10px 0; overflow-wrap:anywhere }
ul,ol { padding-left:27px }
.direct-answer { background:var(--soft); border:1px solid #dce6dc; border-radius:var(--radius); padding:24px 26px; margin-bottom:28px; line-height:1.7 }
.direct-answer p:last-child { margin-bottom:0 }
.article-contents { margin:30px 0 36px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:15px; line-height:1.55 }
.article-contents p { margin:0 0 12px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.article-contents ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 28px; list-style:none; padding:0; margin:0 }
.article-contents li { margin:0 }
.article-contents a { text-decoration:none }
.article-contents a:hover { text-decoration:underline }
.content-section { display:flow-root }
figure { margin:28px 0; max-width:100% }
figcaption,caption { color:var(--muted); font-size:14px; line-height:1.6; text-align:left; margin:12px 0; caption-side:top }
table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:16px; line-height:1.6 }
th,td { padding:14px 12px; border:1px solid var(--line); text-align:left; vertical-align:top; overflow-wrap:anywhere }
th { background:var(--soft); font-weight:650 }
code { font:.9em ui-monospace,Consolas,monospace; background:var(--soft); border-radius:4px; padding:2px 4px; overflow-wrap:anywhere }
pre { background:var(--soft); padding:20px; border-radius:var(--radius); white-space:pre-wrap; overflow-wrap:anywhere }
pre code { padding:0 }
svg,img { max-width:100%; height:auto; display:block }
.optical-panels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
.optical-panel { min-width:0; border:1px solid var(--line); border-radius:8px; padding:8px; background:var(--surface) }
.optical-panel p,.diagram-key { font-size:14px; line-height:1.6; margin:8px 0 }
.sources { border-top:1px solid var(--line); margin-top:44px }
.sources h2 { font-size:23px; margin-top:28px }
.sources ul { padding-left:20px }
.sources li { font-size:15px; line-height:1.65 }
.related { border-top:1px solid var(--line); margin-top:36px }
.related h2 { font-size:25px; margin-top:30px }
.related>p { font-size:15px; margin-top:22px }
.page-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.page-card,.topic-cards>div,.section-card { padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); min-width:0 }
.page-card>a { font-size:19px; font-weight:650; line-height:1.4; display:block; text-decoration:none }
.page-card p { font-size:15px; color:var(--muted); line-height:1.6; margin:12px 0 0 }
.directory { max-width:1100px; padding-top:40px }
.directory h1 { max-width:800px; margin-top:24px }
.directory-intro { font-size:21px; max-width:760px; color:var(--muted) }
.eyebrow { font-size:14px; color:var(--muted) }
.topic-cards,.section-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px }
.topic-cards h3,.section-card h2 { margin-top:0 }
.section-cards { margin-top:36px }
.section-card h2 { font-size:25px }
.section-card h2 a { text-decoration:none }
.section-card p { font-size:16px; color:var(--muted) }
.section-action { font-size:15px }
.pagination { margin-top:32px; display:flex; gap:20px }
.site-footer { max-width:var(--layout); margin:56px auto 0; padding:28px 48px 36px; border-top:1px solid var(--line); font-size:14px; color:var(--muted) }
.site-footer p { margin-bottom:8px }
.ad-slot { width:100%; overflow:hidden; background:#f0f2ee; border:1px solid #e0e5dd; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#737d70; margin:0; contain:layout }
.ad-slot>span { font-size:16px; font-weight:500; letter-spacing:.1em }
.ad-slot small { font-size:11px; margin-top:6px; letter-spacing:.02em }
.rail-ad { height:var(--rail-ad-height); flex:0 1 var(--rail-ad-height); min-height:0 }
.mobile-ad-position { display:none }
.inline-ad { height:var(--inline-ad-height); min-height:var(--inline-ad-height) }
.bottom-ad-position { margin-top:44px }
.bottom-ad { height:var(--bottom-ad-height); min-height:var(--bottom-ad-height) }
.bottom-ad-position:empty { display:none }
.search-result { padding:24px 0; border-bottom:1px solid var(--line) }
.search-result a { font-size:22px; font-weight:600 }
.search-result p { margin:12px 0 0; color:var(--muted) }
@media(max-width:1119px) {
  .right-rail { display:none }
  .article-layout.with-rail { display:block }
  .with-rail .article-body { margin:auto }
  .mobile-ad-position { display:block; margin:30px 0 8px }
}
@media(max-width:767px) {
  .site-container { padding:24px 24px 0 }
  .header-inner { padding:15px 24px; gap:12px; flex-wrap:wrap }
  .brand { font-size:26px }
  .search-form { width:100%; margin:0; gap:7px }
  h1 { font-size:34px; line-height:1.22 }
  .page-cards,.topic-cards,.section-cards { grid-template-columns:1fr }
  .optical-panels { grid-template-columns:1fr }
  .optical-panel svg { max-width:320px; margin:auto }
  .optical-panel p { font-size:16px }
  .breadcrumbs { font-size:12px; margin-bottom:24px }
  .article-contents ol { grid-template-columns:1fr; gap:10px }
  .directory-intro { font-size:19px }
  .site-footer { padding:24px }
}
@media(max-width:599px) {
  :root { --body-size:17px; --leading:1.75 }
  .site-container { padding:22px 20px 0 }
  .header-inner { padding:14px 20px; gap:12px }
  .site-footer { padding:24px 20px }
  .brand { font-size:25px }
  h1 { font-size:31px; margin-bottom:22px }
  h2 { font-size:26px; margin-top:36px }
  h3 { font-size:21px }
  .direct-answer { padding:19px; margin-bottom:24px }
  .article-contents { margin:26px 0; padding:18px 0 }
  .page-card { padding:20px }
  .inline-ad { height:var(--mobile-ad-height); min-height:var(--mobile-ad-height) }
  .bottom-ad { height:var(--mobile-ad-height); min-height:var(--mobile-ad-height) }
  .bottom-ad-position { margin-top:32px }
  table,tbody,tr,td { display:block }
  thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
  tr { margin:16px 0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface) }
  td { border:0; border-bottom:1px solid var(--line); padding:14px 16px }
  td:last-child { border:0 }
  td::before { content:attr(data-label); display:block; font-weight:650; font-size:13px; color:var(--muted); margin-bottom:5px }
  caption { display:block }
  table { font-size:16px }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto } }
:root{--inline-ad-height:250px;--mobile-ad-height:180px;--rail-ad-height:300px;--bottom-ad-height:250px;--rail-gap:32px}