/* Two article-specific headers, both on the lens: reading glasses over a dense answer, and an eye chart. */
.interactive-cover { margin-top:28px; padding:24px 0 0; border-top:1px solid var(--rule); }
.cover-kicker { font:500 11px/1.5 var(--font-sans); color:var(--fg4); letter-spacing:.1em; text-transform:uppercase; }
.cover-outcome { margin:20px 0 0; min-height:2.9em; font:15px/1.45 var(--font-serif); color:var(--fg2); }
.cover-footnote { margin:5px 0 0; font:11px/1.5 var(--font-sans); color:var(--fg4); }
.cover-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.glasses-cover .lens-art { aspect-ratio:2.2; background:#fbfaf6; border:1px solid var(--rule); --g:calc(var(--lens,140px) * .6); }
.dense-answer { position:absolute; inset:0; box-sizing:border-box; padding:26px 30px; columns:3; column-gap:30px; font:11px/1.55 var(--font-sans); color:#9a958c; overflow:hidden; text-align:justify; hyphens:auto; }
/* Two lenses side by side: the reveal is masked, not clipped, so the ring can draw a frame around each. */
.glasses-cover .lens-reveal { clip-path:none !important; opacity:0; transition:opacity .25s;
  -webkit-mask:radial-gradient(circle var(--g) at var(--px) var(--py),#000 97%,transparent 100%),radial-gradient(circle var(--g) at calc(var(--px) - var(--g) * 2.35) var(--py),#000 97%,transparent 100%);
  mask:radial-gradient(circle var(--g) at var(--px) var(--py),#000 97%,transparent 100%),radial-gradient(circle var(--g) at calc(var(--px) - var(--g) * 2.35) var(--py),#000 97%,transparent 100%); }
.plain-answer { background:#fffdf8; color:#1d1c1a; display:grid; place-items:center; padding:0 9%; text-align:center; font:500 30px/1.35 var(--font-serif); }
.plain-answer p { margin:0; }
.plain-answer b { font-weight:600; color:#427b58; }
.glasses-cover.is-active .lens-reveal { opacity:1; }
.glasses-cover .lens-ring { width:calc(var(--g) * 2); border:2px solid #2d2a26; opacity:0; }
.glasses-cover .lens-ring::before { content:""; position:absolute; top:-2px; right:calc(100% + var(--g) * .35); width:100%; height:100%; border:2px solid #2d2a26; border-radius:50%; }
.glasses-cover .lens-ring::after { content:""; position:absolute; top:22%; right:100%; width:calc(var(--g) * .35); height:26%; border-top:2px solid #2d2a26; border-radius:50% 50% 0 0; }
.glasses-cover.is-active .lens-ring { opacity:1; }
.glasses-outcome { margin-top:14px; min-height:0; }
.eyechart .lens-art { aspect-ratio:2.2; background:#fff; border:1px solid var(--rule); }
.eyechart .lens-ring { border:2px solid #2d2a26; }
.ec-chart { position:absolute; inset:0; box-sizing:border-box; padding:16px 26px 12px; display:flex; flex-direction:column; justify-content:space-between; background:#fff; --k:1; }
.ec-row { display:grid; grid-template-columns:26px 1fr 54px; grid-template-rows:auto 13px; align-items:center; column-gap:10px; }
.ec-n { font:10px/1 var(--font-mono); color:var(--fg5); }
.ec-letters { font:700 calc(var(--size) * var(--k))/1 var(--font-sans); letter-spacing:.32em; text-indent:.32em; text-align:center; color:#1d1c1a; white-space:nowrap; }
.ec-score { font:12px/1 var(--font-mono); color:var(--fg4); text-align:right; font-variant-numeric:tabular-nums; }
/* The detail line keeps its row in both layers so the lens shows the same chart, in focus. */
.ec-detail { grid-column:2; grid-row:2; text-align:center; font:9px/1.3 var(--font-mono); letter-spacing:.02em; color:#427b58; visibility:hidden; white-space:nowrap; }
.ec-focus { background:#fffdf8; }
.ec-focus .ec-detail { visibility:visible; }
.ec-focus .ec-score { color:#1d1c1a; }
/* Five rows need about 290px at full size, more than a 2.2 box gives on narrow screens. */
.eyechart .lens-art { min-height:290px; }
@media(max-width:760px) {
  .ec-chart { --k:.62; padding:12px 14px 8px; }
  .ec-row { grid-template-columns:18px minmax(0,1fr) 40px; }
  .eyechart .lens-art { min-height:210px; }
}
@media(max-width:480px) {
  .ec-chart { --k:.5; }
  .ec-letters { letter-spacing:.2em; text-indent:.2em; }
  .eyechart .lens-art { min-height:180px; }
}
@media(max-width:359px) { .ec-chart { --k:.42; } }
@media(max-width:480px) {
  .interactive-cover { margin-top:22px; padding-top:18px; }
  .cover-kicker { font-size:10px; letter-spacing:.07em; }
  .dense-answer { columns:2; font-size:10px; padding:12px 14px; }
  .plain-answer { font-size:22px; }
  .ec-detail { font-size:7px; }
  .cover-outcome { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) {
  .interactive-cover *, .interactive-cover *::before { transition:none !important; }
}