/* ADI — accessibility menu button, panel, and the four optional display modes */

/* ---------- Trigger button ---------- */
.a11y-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: transparent; color: var(--plum);
  display: inline-grid; place-items: center; cursor: pointer; padding: 0; flex: none;
}
.a11y-btn svg { width: 24px; height: 24px; }
/* on the landing hero: top-left corner, readable over the photo */
.a11y-btn-hero {
  position: absolute; top: 14px; left: clamp(14px, 5vw, 44px); z-index: 3;
  background: rgba(84, 36, 62, .72); border-color: rgba(252, 244, 243, .35); color: var(--blush);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.a11y-btn:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; box-shadow: 0 0 0 5px var(--blush); }

/* ---------- Panel ---------- */
.a11y-panel {
  position: fixed; z-index: 260; top: 66px; left: 12px; width: min(330px, calc(100vw - 24px));
  background: var(--blush); color: var(--plum); border-radius: 20px; padding: 16px;
  box-shadow: 0 24px 50px -16px rgba(30, 8, 20, .55); font-family: var(--font-body); font-size: 16px; line-height: 1.4;
}
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.a11y-head h2 { font-family: var(--font-body); font-size: 18px; font-weight: 600; margin: 0; letter-spacing: 0; }
.a11y-close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--plum-06); color: var(--plum); font-size: 24px; cursor: pointer; }
.a11y-options { display: grid; gap: 8px; }
.a11y-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 10px 14px;
  border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--paper); color: var(--plum);
  font: inherit; font-weight: 500; text-align: start; cursor: pointer;
}
.a11y-opt[aria-pressed="true"] { border-color: var(--plum); background: var(--rose-soft); }
.a11y-switch { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: var(--line-strong); transition: background-color .2s; }
.a11y-switch::after { content: ''; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.a11y-opt[aria-pressed="true"] .a11y-switch { background: var(--plum); }
.a11y-opt[aria-pressed="true"] .a11y-switch::after { transform: translateX(-16px); }
.a11y-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.a11y-reset { min-height: 44px; border: 0; background: none; color: var(--plum); font: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0 2px; }
.a11y-foot a { color: var(--plum); font-weight: 500; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.a11y-panel :focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }

/* ---------- Mode: larger text ---------- */
html.a11y-text body { zoom: 1.2; }
html.a11y-text .a11y-panel { zoom: calc(1 / 1.2); }

/* ---------- Mode: higher contrast ---------- */
html.a11y-contrast {
  --rose: var(--rose-light);   /* rose text on plum gets lighter */
  --plum-70: var(--plum);      /* secondary plum text becomes full plum */
  --plum-12: var(--line-strong);
}
html.a11y-contrast .lede, html.a11y-contrast .sig-role, html.a11y-contrast .act-villain p, html.a11y-contrast .qcard p,
html.a11y-contrast .shot figcaption, html.a11y-contrast .talk-sub, html.a11y-contrast .fine { color: inherit; opacity: 1; }
html.a11y-contrast .act-villain p, html.a11y-contrast .qcard p, html.a11y-contrast .shot figcaption, html.a11y-contrast .lede, html.a11y-contrast .sig-role { color: var(--blush); }
html.a11y-contrast .hero-photo::after { background: linear-gradient(to bottom, rgba(84,36,62,.7) 0%, rgba(84,36,62,.2) 25%, rgba(84,36,62,.35) 45%, rgba(84,36,62,.85) 70%, var(--plum) 100%); }
html.a11y-contrast .qcard { background: #3E1A2E; }
html.a11y-contrast .bottom-nav a { color: var(--plum); }

/* ---------- Mode: stop animations ---------- */
html.a11y-still, html.a11y-still * { scroll-behavior: auto !important; }
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation: none !important; transition: none !important; }
html.a11y-still .reveal, html.a11y-still .hero-copy > * { opacity: 1 !important; transform: none !important; }
html.a11y-still .qcard { transform: none !important; }
html.a11y-still .marker::after { transform: rotate(-1.4deg) scaleX(1) !important; }
html.a11y-still .wd > .wi { transform: none !important; }
html.a11y-still .fill-words .fw { opacity: 1 !important; }
html.a11y-still .act-hero, html.a11y-still .act-hero > * { opacity: 1 !important; transform: none !important; }
html.a11y-still .pair .shot-frame img { clip-path: none !important; }
html.a11y-still .pair .shot-frame .lab { opacity: 1 !important; }

/* ---------- Mode: highlight links and buttons ---------- */
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; }
html.a11y-links a, html.a11y-links button:not(.a11y-opt):not(.a11y-close):not(.a11y-reset) { outline: 2px dashed currentColor; outline-offset: 2px; }