/* Shared navigation, help links, and responsive refinements. */
.oc-site-page { --oc-readable-link: #345b70; --oc-readable-accent: #37675f; }
.oc-site-page a { text-underline-offset: .2em; }
.oc-site-page a:focus-visible { outline: 3px solid var(--oc-readable-accent); outline-offset: 5px; border-radius: 2px; }
.oc-site-page .skip-link { position: absolute; top: .5rem; left: 1rem; transform: translateY(-180%); z-index: 200; padding: .6rem 1rem; background: white; color: var(--oc-readable-link); font-weight: 600; }
.oc-site-page .skip-link:focus { transform: translateY(0); }
.oc-site-page nav { flex-wrap: wrap; gap: .5rem 1.5rem; }
.oc-site-page .nav-left { color: var(--text-primary); }
.oc-site-page .nav-right ul { flex-wrap: wrap; gap: .25rem 1.25rem; }
.oc-site-page .nav-right a { color: var(--oc-readable-link); display: inline-block; padding: .45rem 0; }
.oc-site-page .nav-right a.current { color: var(--text-primary); text-decoration: underline; }
.oc-site-page main { padding-top: 3rem; }
.oc-site-page .site-help-links { margin-top: 1rem; display: flex; justify-content: center; gap: .5rem 1.5rem; flex-wrap: wrap; list-style: none; }
.oc-site-page .site-help-links a, .oc-site-page .badfood-product a, .oc-site-page .fiction-notice a, .oc-site-page .privacy-scope a { color: var(--oc-readable-link); }
.oc-site-page .badfood-product .product-tag { color: #783e35; background: #f6eae7; }
.oc-site-page .badfood-product h3 { font-size: 1.7rem; }
.oc-site-page .badfood-product p { font-size: .95rem; margin-top: 1rem; margin-bottom: 1rem; }
.oc-site-page .badfood-product .product-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; }
.oc-site-page .fiction-notice { border-left: 4px solid var(--oc-readable-accent); border-radius: 4px; padding: 1.2rem; margin-bottom: 2rem; background: #edf1eb; }
.oc-site-page .fiction-notice p { font-size: 1rem; margin: 0; }
.oc-site-page .satire-label { font-family: var(--font-sans); color: var(--oc-readable-accent); font-weight: 600; font-size: .8rem; display: block; margin-bottom: .4rem; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 640px) {
 .oc-site-page nav { position: static; align-items: flex-start; flex-direction: column; padding: 1rem 1.25rem; }
 .oc-site-page .nav-right ul { gap: .2rem 1.2rem; }
 .oc-site-page .nav-right a { font-size: .9rem; }
 .oc-site-page main, .oc-site-page main.content-center { padding: 2rem 1.25rem 3rem; }
 .oc-site-page .product-grid { grid-template-columns: minmax(0, 1fr); margin-top: 1.5rem; }
 .oc-site-page .product-card { padding: 1.5rem; }
 .oc-site-page .hero-title { font-size: 2.5rem; }
 .oc-site-page .equation-block { padding: 1.25rem; overflow-wrap: anywhere; }
 .oc-site-page footer { padding: 1.5rem 1.25rem; }
}