/*
 * Mojan palette proposal v12 — scoped, optional layer after reading-v11.css.
 * Enable on BODY: class="... mojan-palette-v12".
 * Topics: driving | scleral | eyewear | myopia | orthok. Unknown topics use green.
 * Source: Mojan-Visual-Base/BASE.md and base.json, palette v1.2-operational.
 * Color family is reused; cover/story typography and geometry are not imported.
 * No image, logo, font, copy, display order, reading width, or fixed height changes.
 * Normal-text contrast on ivory: charcoal 12.07, green 11.33, brown 8.99,
 * burgundy 8.18. Brown on greige 6.93; champagne on charcoal 5.98.
 * Bronze/taupe/champagne on ivory are decorative only, never small text.
 */
.mojan-palette-v12 {
  --mojan-ivory: #F7F4EC;
  --mojan-greige: #DCD8CC;
  --mojan-taupe: #ABA08D;
  --mojan-brown: #4B4233;
  --mojan-charcoal: #2F302E;
  --mojan-green: #173A31;
  --mojan-champagne: #C9A97E;
  --mojan-bronze: #AE7847;
  --mojan-burgundy: #7A3045;
  --paper: var(--mojan-ivory);
  --ink: var(--mojan-charcoal);
  --accent: var(--mojan-burgundy);
  --rule: var(--mojan-greige);
  --technical: var(--mojan-greige);
  --topic-ink: var(--mojan-green);
  --entry-paper: var(--mojan-greige);
  --entry-ink: var(--mojan-brown);
  --entry-rule: var(--mojan-bronze);
  --green: var(--mojan-green);
  --green-2: var(--mojan-green);
  --sand: var(--mojan-champagne);
  --muted: var(--mojan-brown);
  --line: var(--mojan-greige);
  --soft: var(--mojan-ivory);
  --warm: var(--mojan-greige);
  --ref-ink: var(--mojan-charcoal);
  --ref-muted: var(--mojan-brown);
  --ref-paper: var(--mojan-ivory);
  --ref-line: var(--mojan-greige);
  --v8-ink: var(--mojan-green);
  --v8-paper: var(--mojan-ivory);
  --v8-line: var(--mojan-greige);
  background: var(--paper);
  color: var(--ink);
}

.mojan-palette-v12[data-topic="driving"] {
  --topic-ink: var(--mojan-brown);
  --entry-paper: var(--mojan-charcoal);
  --entry-ink: var(--mojan-ivory);
  --entry-rule: var(--mojan-champagne);
}
.mojan-palette-v12[data-topic="scleral"] {
  --topic-ink: var(--mojan-green);
  --entry-paper: var(--mojan-green);
  --entry-ink: var(--mojan-ivory);
  --entry-rule: var(--mojan-champagne);
}
.mojan-palette-v12[data-topic="eyewear"] {
  --topic-ink: var(--mojan-burgundy);
  --entry-paper: var(--mojan-greige);
  --entry-ink: var(--mojan-brown);
  --entry-rule: var(--mojan-burgundy);
}
.mojan-palette-v12[data-topic="myopia"] {
  --topic-ink: var(--mojan-green);
  --entry-paper: var(--mojan-greige);
  --entry-ink: var(--mojan-green);
  --entry-rule: var(--mojan-green);
}
.mojan-palette-v12[data-topic="orthok"] {
  --topic-ink: var(--mojan-burgundy);
  --entry-paper: var(--mojan-ivory);
  --entry-ink: var(--mojan-burgundy);
  --entry-rule: var(--mojan-burgundy);
}

/* A distinct topic entrance; the long introduction remains on the reading paper. */
.mojan-palette-v12 .approved-copy .intro > h1 {
  background: var(--entry-paper);
  color: var(--entry-ink);
  border-block-start: 4px solid var(--entry-rule);
  padding: 1.5rem 1.75rem;
}
.mojan-palette-v12 .approved-copy h2 {
  color: var(--topic-ink);
}
.mojan-palette-v12 .approved-copy h3 {
  color: var(--mojan-brown);
  border-inline-start-color: var(--mojan-bronze);
}
.mojan-palette-v12 .reading-breadcrumb,
.mojan-palette-v12 .reading-index .index-label {
  color: var(--mojan-brown);
}
.mojan-palette-v12 .reading-index a span,
.mojan-palette-v12 .reading-index summary::after {
  color: var(--topic-ink);
}

/* Mark only the technical chapter entrance, not every section or paragraph. */
.mojan-palette-v12 .reading-section[aria-labelledby="lens-structure"] > h2,
.mojan-palette-v12 .reading-section[aria-labelledby="lens-design"] > h2,
.mojan-palette-v12 .reading-section[aria-labelledby="lens-designs"] > h2 {
  padding: .875rem 1.125rem;
  background: var(--mojan-greige);
  color: var(--mojan-green);
  border-inline-start: 3px solid var(--mojan-green);
}
.mojan-palette-v12 .approved-copy .key-point {
  background: var(--mojan-greige);
  border-inline-start-color: var(--mojan-bronze);
}

/* An authored viewpoint is a deliberate reading pause, distinct from technical facts. */
.mojan-palette-v12 .mojan-viewpoint {
  background: var(--mojan-charcoal);
  border-inline-start-color: var(--mojan-champagne);
}
.mojan-palette-v12 .mojan-viewpoint .viewpoint-label {
  color: var(--mojan-champagne);
}
.mojan-palette-v12 .mojan-viewpoint blockquote,
.mojan-palette-v12 .mojan-viewpoint blockquote p {
  color: var(--mojan-ivory);
}

/* Tables retain their existing responsive layout and row associations. */
.mojan-palette-v12 .comparison-wrap {
  border-color: var(--mojan-taupe);
}
.mojan-palette-v12 .comparison-wrap thead,
.mojan-palette-v12 .comparison-wrap thead th {
  background: var(--mojan-green);
  color: var(--mojan-ivory);
}
.mojan-palette-v12 .comparison-wrap tbody th {
  background: var(--mojan-greige);
  color: var(--mojan-brown);
}
.mojan-palette-v12 .comparison-wrap tbody td {
  background: var(--mojan-ivory);
  color: var(--mojan-charcoal);
}
.mojan-palette-v12 .comparison-wrap th,
.mojan-palette-v12 .comparison-wrap td {
  border-color: var(--mojan-taupe);
}

/* One clear contact destination; no decorative color added to ordinary paragraphs. */
.mojan-palette-v12 .reading-section.visit {
  background: var(--topic-ink);
  border-block-start: 4px solid var(--mojan-champagne);
}
.mojan-palette-v12 .reading-section.visit h2,
.mojan-palette-v12 .reading-section.visit p,
.mojan-palette-v12 .reading-section.visit p a {
  color: var(--mojan-ivory);
}
.mojan-palette-v12 .visit-actions .contact-primary,
.mojan-palette-v12 .visit-actions .contact-primary:hover {
  background: var(--mojan-ivory);
  border-color: var(--mojan-ivory);
  color: var(--topic-ink);
}
.mojan-palette-v12 .visit-actions .contact-secondary {
  background: transparent;
  border-color: var(--mojan-ivory);
  color: var(--mojan-ivory);
}
.mojan-palette-v12 .visit-actions .contact-secondary:hover {
  background: var(--mojan-ivory);
  color: var(--topic-ink);
}
.mojan-palette-v12 .visit-actions .visit-guide {
  color: var(--mojan-ivory);
}
.mojan-palette-v12 .reading-section.visit a:focus-visible {
  outline-color: var(--mojan-ivory);
}

/* Keep the original colored Persian logo on a light header. */
.mojan-palette-v12 .site-header {
  background: var(--mojan-ivory);
}
.mojan-palette-v12 .site-footer {
  background: var(--mojan-greige);
  color: var(--mojan-charcoal);
}
.mojan-palette-v12 .mobile-actions {
  background: var(--mojan-ivory);
}
.mojan-palette-v12 .mobile-actions .button.primary {
  background: var(--topic-ink);
  border-color: var(--topic-ink);
  color: var(--mojan-ivory);
}

/* Legacy reference pages: colors only; preserve columns, images and typography. */
.mojan-palette-v12 .ref-intro h1,
.mojan-palette-v12 .ref-section h2,
.mojan-palette-v12 .ref-section-head h2,
.mojan-palette-v12 .ref-related > h2,
.mojan-palette-v12 .ref-faq h2 {
  color: var(--topic-ink);
}
.mojan-palette-v12 .ref-section h3,
.mojan-palette-v12 .ref-lead,
.mojan-palette-v12 .ref-breadcrumb,
.mojan-palette-v12 .ref-kicker,
.mojan-palette-v12 .ref-toc a,
.mojan-palette-v12 .ref-figure figcaption {
  color: var(--mojan-brown);
}
.mojan-palette-v12 .ref-intro .ref-names {
  color: var(--topic-ink);
}
.mojan-palette-v12 .ref-section,
.mojan-palette-v12 .ref-related,
.mojan-palette-v12 .ref-faq details {
  border-color: var(--mojan-greige);
}
.mojan-palette-v12 .ref-toc {
  border-color: var(--mojan-bronze);
}
.mojan-palette-v12 .ref-toc a:hover,
.mojan-palette-v12 .ref-inline,
.mojan-palette-v12 .ref-more {
  color: var(--topic-ink);
}
.mojan-palette-v12 .ref-card {
  background: var(--mojan-ivory);
  border-color: var(--mojan-taupe);
}
.mojan-palette-v12 .ref-card h2,
.mojan-palette-v12 .ref-card h3 {
  color: var(--topic-ink);
}
.mojan-palette-v12 .ref-card p {
  color: var(--mojan-charcoal);
}
.mojan-palette-v12 .ref-card:hover {
  background: var(--mojan-greige);
  border-color: var(--topic-ink);
}
.mojan-palette-v12 .ref-sources {
  background: var(--mojan-greige);
  color: var(--mojan-charcoal);
  border-color: var(--mojan-bronze);
}
.mojan-palette-v12 .ref-feature {
  background: var(--mojan-greige);
}

/* Legacy v8 sections and tables share the same functional palette. */
.mojan-palette-v12 .v8-intro h1,
.mojan-palette-v12 .v8-section h2,
.mojan-palette-v12 .v8-section h3,
.mojan-palette-v12 .v8-card h2,
.mojan-palette-v12 .v8-card h3,
.mojan-palette-v12 .v8-more {
  color: var(--topic-ink);
}
.mojan-palette-v12 .v8-eyebrow,
.mojan-palette-v12 .v8-number,
.mojan-palette-v12 .v8-identity,
.mojan-palette-v12 .v8-card p,
.mojan-palette-v12 .v8-link-list small {
  color: var(--mojan-brown);
}
.mojan-palette-v12 .v8-section,
.mojan-palette-v12 .v8-related,
.mojan-palette-v12 .v8-link-list li {
  border-color: var(--mojan-greige);
}
.mojan-palette-v12 .v8-card {
  background: var(--mojan-ivory);
  border-color: var(--mojan-taupe);
}
.mojan-palette-v12 .v8-card[href]:hover {
  background: var(--mojan-greige);
  border-color: var(--topic-ink);
}
.mojan-palette-v12 .v8-focus,
.mojan-palette-v12 .v8-sources,
.mojan-palette-v12 .v8-legacy {
  background: var(--mojan-greige);
  color: var(--mojan-charcoal);
}
.mojan-palette-v12 .v8-proof {
  border-color: var(--mojan-bronze);
}
.mojan-palette-v12 .v8-table-wrap,
.mojan-palette-v12 .v8-table-wrap th,
.mojan-palette-v12 .v8-table-wrap td {
  border-color: var(--mojan-taupe);
}
.mojan-palette-v12 .v8-table-wrap th {
  background: var(--mojan-greige);
  color: var(--mojan-brown);
}
.mojan-palette-v12 .v8-table-wrap thead th {
  background: var(--mojan-green);
  color: var(--mojan-ivory);
}
.mojan-palette-v12 .v8-table-wrap td {
  background: var(--mojan-ivory);
  color: var(--mojan-charcoal);
}

/* Home9 keeps its real portrait and existing arrangement; color marks content roles. */
.mojan-palette-v12 .home9 {
  --h9-line: var(--mojan-greige);
  --h9-muted: var(--mojan-brown);
  --h9-accent: var(--mojan-burgundy);
}
.mojan-palette-v12 .home9 h1,
.mojan-palette-v12 .home9 h2,
.mojan-palette-v12 .home9-portrait figcaption strong {
  color: var(--mojan-green);
}
.mojan-palette-v12 .home9-kicker,
.mojan-palette-v12 .home9-choice-type {
  color: var(--mojan-burgundy);
}
.mojan-palette-v12 .home9-routes a,
.mojan-palette-v12 .home9-expand {
  color: var(--mojan-green);
}
.mojan-palette-v12 .home9-routes a[href*="eyewear"],
.mojan-palette-v12 .home9-routes a[href*="eyewear"] span {
  color: var(--mojan-burgundy);
}
.mojan-palette-v12 .home9-routes a[href*="night-driving"],
.mojan-palette-v12 .home9-routes a[href*="night-driving"] span {
  color: var(--mojan-brown);
}
.mojan-palette-v12 .home9-quote {
  color: var(--mojan-brown);
  border-color: var(--mojan-bronze);
}
.mojan-palette-v12 .home9-outcome {
  color: var(--mojan-green);
  border-color: var(--mojan-green);
}
.mojan-palette-v12 .home9 a:hover {
  text-decoration-color: var(--mojan-burgundy);
}

/* Existing contact panels: readable light copy on topic color, with inverse buttons. */
.mojan-palette-v12 .ref-cta,
.mojan-palette-v12 .v8-visit,
.mojan-palette-v12 .home9-visit {
  background: var(--topic-ink);
  color: var(--mojan-ivory);
}
.mojan-palette-v12 .ref-cta h2,
.mojan-palette-v12 .ref-cta p,
.mojan-palette-v12 .ref-cta a,
.mojan-palette-v12 .v8-visit h2,
.mojan-palette-v12 .v8-visit p,
.mojan-palette-v12 .v8-visit a,
.mojan-palette-v12 .home9-visit h2,
.mojan-palette-v12 .home9-visit p,
.mojan-palette-v12 .home9-visit a,
.mojan-palette-v12 .home9-visit .home9-kicker {
  color: var(--mojan-ivory);
}
.mojan-palette-v12 .ref-cta .button,
.mojan-palette-v12 .v8-visit .button,
.mojan-palette-v12 .home9-visit .button.sand {
  background: var(--mojan-ivory);
  color: var(--topic-ink);
  border-color: var(--mojan-ivory);
}
.mojan-palette-v12 .ref-cta a:focus-visible,
.mojan-palette-v12 .v8-visit a:focus-visible,
.mojan-palette-v12 .home9-visit a:focus-visible {
  outline-color: var(--mojan-ivory);
}
.mojan-palette-v12 .home9-actions .button.primary,
.mojan-palette-v12 .v8-actions .button:not(.outline) {
  background: var(--topic-ink);
  color: var(--mojan-ivory);
  border-color: var(--topic-ink);
}
.mojan-palette-v12 :is(.ref-cta, .v8-visit, .home9-visit) .button:not(.outline) {
  background: var(--mojan-ivory);
  color: var(--topic-ink);
  border-color: var(--mojan-ivory);
}
.mojan-palette-v12 .ref-cta .ref-en,
.mojan-palette-v12 .ref-cta .ref-kicker,
.mojan-palette-v12 .v8-visit .v8-name {
  color: var(--mojan-ivory);
}
.mojan-palette-v12 .site-header .button.outline {
  background: transparent;
  color: var(--mojan-green);
  border-color: var(--mojan-green);
}
.mojan-palette-v12 .site-header .button.outline:hover {
  background: var(--mojan-green);
  color: var(--mojan-ivory);
}

@media (max-width: 760px) {
  .mojan-palette-v12 .approved-copy .intro > h1 {
    padding: 1.125rem 1.25rem;
  }
  .mojan-palette-v12 .reading-section[aria-labelledby="lens-structure"] > h2,
  .mojan-palette-v12 .reading-section[aria-labelledby="lens-design"] > h2,
  .mojan-palette-v12 .reading-section[aria-labelledby="lens-designs"] > h2 {
    padding: .75rem .875rem;
  }
}

@media print {
  .mojan-palette-v12 .approved-copy .intro > h1,
  .mojan-palette-v12 .mojan-viewpoint,
  .mojan-palette-v12 .reading-section.visit,
  .mojan-palette-v12 .ref-cta,
  .mojan-palette-v12 .v8-visit,
  .mojan-palette-v12 .home9-visit,
  .mojan-palette-v12 .comparison-wrap thead,
  .mojan-palette-v12 .comparison-wrap thead th,
  .mojan-palette-v12 .v8-table-wrap thead th {
    background: transparent;
    color: var(--mojan-charcoal);
  }
  .mojan-palette-v12 .mojan-viewpoint .viewpoint-label,
  .mojan-palette-v12 .mojan-viewpoint blockquote,
  .mojan-palette-v12 .mojan-viewpoint blockquote p,
  .mojan-palette-v12 .reading-section.visit h2,
  .mojan-palette-v12 .reading-section.visit p,
  .mojan-palette-v12 .reading-section.visit p a,
  .mojan-palette-v12 .ref-cta h2,
  .mojan-palette-v12 .ref-cta p,
  .mojan-palette-v12 .ref-cta a,
  .mojan-palette-v12 .ref-cta .ref-en,
  .mojan-palette-v12 .ref-cta .ref-kicker,
  .mojan-palette-v12 .v8-visit h2,
  .mojan-palette-v12 .v8-visit p,
  .mojan-palette-v12 .v8-visit a,
  .mojan-palette-v12 .v8-visit .v8-name,
  .mojan-palette-v12 .home9-visit h2,
  .mojan-palette-v12 .home9-visit p,
  .mojan-palette-v12 .home9-visit a,
  .mojan-palette-v12 .home9-visit .home9-kicker {
    color: var(--mojan-charcoal);
  }
}

.mojan-palette-v12 .brand img{width:8.75rem;height:auto;max-width:100%;object-fit:contain}.reading-list{padding-inline-start:1.5rem;line-height:1.95;font-size:1.1875rem}.reading-list li{margin:.75rem 0}.legacy-anchor{display:block;scroll-margin-top:7.5rem}@media(max-width:760px){.mojan-palette-v12 .brand img{width:7.5rem}.reading-list{font-size:1.125rem}}@media(max-width:359px){.mojan-palette-v12 .brand img{width:6rem}}