/* Reusable concept introduction; currently used only by eyewear.html. */
.tool-intro {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  margin: 1.5rem 0 2rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  direction: rtl;
  text-align: right;
  background: var(--mojan-charcoal, #2f302e);
  color: var(--mojan-ivory, #f7f4ec);
  border-inline-start: 4px solid var(--mojan-champagne, #c9a97e);
  border-radius: 4px;
}
.tool-intro > h2.tool-intro-title {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
  color: var(--mojan-champagne, #c9a97e);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 750;
  line-height: 1.8;
}
.tool-intro > p, .approved-copy .tool-intro > p {
  margin: 0 0 1rem;
  color: var(--mojan-ivory, #f7f4ec);
  font-size: 1.125rem;
  line-height: 2;
  overflow-wrap: break-word;
}
.tool-intro > p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .tool-intro { margin-block: 1.25rem; padding: 1.25rem; }
  .tool-intro > p, .approved-copy .tool-intro > p { font-size: 1.0625rem; }
}

/* Scoped to the eyewear article. Palette and purchased font come from Mojan. */
.eyewear-guide{--eg-ink:#2f302e;--eg-wine:#642f3b;--eg-sage:#eef1eb;--eg-gold:#c9a97e;--eg-paper:#f7f4ec;color:var(--eg-ink);min-width:0}
.eyewear-guide .eg-intro{margin-bottom:1.25rem}
.eyewear-guide .eg-intro h1{font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.8;margin:0 0 .75rem}
.eyewear-guide .eg-byline{color:#665c57;font-size:.9375rem;margin:0}
.eyewear-guide p,.eyewear-guide li{font-size:1.0625rem;line-height:2.1;text-align:right}
.eyewear-guide p{margin:0 0 1.15rem;max-width:none}
.eyewear-guide .eg-section{padding:2.5rem 0;border-bottom:1px solid #ded8cf;position:relative}
.eyewear-guide h2{color:var(--eg-wine);font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.9;margin:0 0 1.4rem;padding:0;border:0}
.eyewear-guide h3{color:var(--eg-ink);font-size:1.18rem;line-height:1.9;margin:2rem 0 1rem}
.eyewear-guide [id]{scroll-margin-top:140px}
.eyewear-guide .legacy-anchor{display:block;height:0;overflow:hidden;pointer-events:none}
.eyewear-guide strong{font-weight:750}
.eyewear-guide .eg-two-layers{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0}
.eyewear-guide .eg-layer{padding:1.5rem;border:1px solid #ddd4c6;border-top:4px solid var(--eg-gold);border-radius:8px;background:#f5efe5}
.eyewear-guide .eg-person{background:var(--eg-sage);border-color:#cbd4c5;border-top-color:#687660}
.eyewear-guide .eg-layer h3{margin:0 0 .75rem}
.eyewear-guide .eg-layer p:last-child{margin:0}
.eyewear-guide .eg-takeaway{margin:1.5rem 0 0;padding:1rem 1.25rem;border-inline-start:3px solid var(--eg-gold);background:#f5f0e8;font-weight:550;border-radius:3px}
.eyewear-guide .eg-index{padding:1.4rem;background:#fff;border:1px solid #ded8cf;border-radius:8px;margin:2rem 0 0}
.eyewear-guide .eg-index p{font-weight:750;margin:0 0 .9rem;color:var(--eg-wine)}
.eyewear-guide .eg-index>div{display:flex;flex-wrap:wrap;gap:.6rem}
.eyewear-guide .eg-index a{display:inline-flex;align-items:center;min-height:44px;padding:.4rem .85rem;border:1px solid #ded8cf;border-radius:5px;font-size:.93rem;color:var(--eg-ink);text-decoration:none;background:#fcfaf6}
.eyewear-guide .eg-index a:hover{background:#eee6d9;border-color:#b09b7f}
.eyewear-guide a:focus-visible,.eyewear-guide summary:focus-visible{outline:3px solid var(--eg-wine);outline-offset:4px}
.eyewear-guide .eg-table-wrap{margin:1.5rem 0;border:1px solid #d9d0c2;border-radius:8px;overflow:hidden;max-width:100%}
.eyewear-guide .eg-lens-table{width:100%;min-width:0;border-collapse:collapse;table-layout:fixed;margin:0}
.eyewear-guide .eg-lens-table caption{font-size:.9375rem;text-align:right;padding:1rem 1.2rem;background:#f0e9dd;color:var(--eg-ink);font-weight:650}
.eyewear-guide .eg-lens-table th,.eyewear-guide .eg-lens-table td{padding:1.15rem 1.2rem;text-align:right;vertical-align:top;border:0;border-bottom:1px solid #ded8cf;font-size:1rem;line-height:2;background:#fff;overflow-wrap:break-word}
.eyewear-guide .eg-lens-table thead th{background:#eee7dc;font-weight:750}
.eyewear-guide .eg-lens-table th:first-child{width:24%}
.eyewear-guide .eg-lens-table tbody th{background:#faf7f1;color:var(--eg-wine)}
.eyewear-guide .eg-lens-table tr:last-child>*{border-bottom:0}
.eyewear-guide .eg-material-grid{list-style:none;padding:0;margin:1.5rem 0;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.eyewear-guide .eg-material-grid li{padding:1.25rem;background:#f2f3ee;border:1px solid #d9ded2;border-radius:6px;margin:0}
.eyewear-guide .eg-material-grid strong{display:block;color:#45523d;margin-bottom:.4rem}
.eyewear-guide .eg-coating-grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid #ddd4c6;margin:1.5rem 0}
.eyewear-guide .eg-feature{display:grid;grid-template-columns:minmax(130px,1fr) 2fr;gap:1.25rem;padding:1.3rem 0;border-bottom:1px solid #ddd4c6}
.eyewear-guide .eg-feature h3,.eyewear-guide .eg-feature p{margin:0}
.eyewear-guide .eg-light{background:#f4efe4;border:1px solid #ddd2bd;border-radius:8px;padding:1.75rem;margin-top:2rem}
.eyewear-guide .eg-person-section{margin-top:1rem}
.eyewear-guide .eg-case{padding:1.6rem;background:var(--eg-sage);border-radius:8px;border-inline-start:4px solid #6c7568;margin:1.75rem 0 0}
.eyewear-guide .eg-case h3{margin-top:0}
.eyewear-guide .eg-case .eg-takeaway{background:#fff;border-color:#6c7568}
.eyewear-guide .eg-visit{background:var(--eg-paper);padding:1.75rem;border:1px solid #d8c6ab;border-radius:8px;margin:2rem 0}
.eyewear-guide .eg-cite{font-size:.8em;text-decoration:underline;text-underline-offset:.2em;padding-inline:.3em;white-space:nowrap;color:var(--eg-wine)}
.eyewear-guide .eg-sources{border:1px solid #ded8cf;border-radius:6px;padding:1rem 1.25rem;margin:2rem 0}
.eyewear-guide .eg-sources summary{cursor:pointer;min-height:32px;font-weight:650;color:var(--eg-wine)}
.eyewear-guide .eg-sources li{font-size:.94rem;padding:.4rem 0}
.eyewear-guide .eg-sources a{color:var(--eg-wine);text-decoration:underline;text-underline-offset:.25em}
@media(max-width:640px){
 .eyewear-guide .eg-two-layers,.eyewear-guide .eg-material-grid,.eyewear-guide .eg-feature{grid-template-columns:1fr}
 .eyewear-guide .eg-section{padding-block:1.8rem}
 .eyewear-guide p,.eyewear-guide li{font-size:1rem;line-height:2.1}
 .eyewear-guide .eg-layer,.eyewear-guide .eg-case,.eyewear-guide .eg-light,.eyewear-guide .eg-visit{padding:1.2rem}
 .eyewear-guide .eg-feature{gap:.5rem}
 .eyewear-guide .eg-lens-table th,.eyewear-guide .eg-lens-table td{padding:.8rem;font-size:.94rem}
 .eyewear-guide .eg-lens-table th:first-child{width:28%}
 .eyewear-guide .eg-index{padding:1rem}
 .eyewear-guide .eg-index a{flex:1 1 calc(50% - .6rem);justify-content:center;font-size:.88rem;padding-inline:.3rem}
 .eyewear-guide .eg-takeaway{padding:1rem}
}
@media print{.eyewear-guide .eg-index,.eyewear-guide .visit-actions{display:none}.eyewear-guide .eg-section{break-inside:auto}.eyewear-guide h2,.eyewear-guide h3{break-after:avoid}.eyewear-guide .eg-layer,.eyewear-guide .eg-feature,.eyewear-guide tr{break-inside:avoid}}
