/* ==========================================================================
   ACCESSIBILITY WIDGET + the modes it turns on.
   In her palette, so it reads as part of the site rather than bolted on.
   ========================================================================== */

.a11y {
  position: fixed; z-index: 300;
  inset-inline-start: clamp(12px, 2vw, 22px);
  bottom: clamp(12px, 2vw, 22px);
  font-family: 'Assistant', system-ui, sans-serif;
}
/* The widget sits at z-index 300, above the portfolio viewer's 200, and on a
   390px phone its 52px button lands exactly on top of the viewer's "previous"
   arrow — two controls stacked in the same spot. It steps aside while the
   viewer is open. Nothing is lost: the viewer is a modal, the widget behind
   it is outside the dialog and inert anyway, and Escape brings it straight
   back. */
html.lb-on .a11y { display: none; }
/* Same collision, second instance: below 768 the sticky call bar owns the
   bottom of the screen, and this widget was landing ON the WhatsApp pill -
   the one conversion action on the site. MEASURED at 390px before the fix:
   widget occupied x 12-64 / y 780-832, the pill x 20-190 / y 790-834, so the
   left third of "WhatsApp" opened the accessibility menu instead.

   Lifted by the bar's own height (44px pill + 2x10px padding + 1px rule)
   plus its safe-area inset, so it clears a notched phone too. Scoped with
   :has() because accessibility.php and 404.html carry no call bar and the
   widget should stay at the bottom corner there; where :has() is missing the
   rule simply does not apply and behaviour is exactly what it is today. */
@media (max-width: 767px) {
  body:has(.callbar) .a11y {
    bottom: calc(clamp(12px, 2vw, 22px) + 65px + env(safe-area-inset-bottom, 0px));
  }
}
.a11y__btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: #1E332C; color: #F4F0E8;
  border: 1px solid rgba(184, 162, 125, 0.55);
  cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 6px 22px rgba(9, 18, 15, 0.34);
  transition: background-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.a11y__btn:hover { background: #101D19; border-color: #B8A27D; }
.a11y__btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.a11y__btn circle { fill: currentColor; stroke: none; }

.a11y__panel {
  position: absolute; bottom: 62px; inset-inline-start: 0;
  width: min(268px, calc(100vw - 28px));
  background: #F9F7F2; color: #16211D;
  border: 1px solid rgba(22, 33, 29, 0.16); border-radius: 6px;
  padding: 14px; box-shadow: 0 16px 46px rgba(9, 18, 15, 0.28);
}
.a11y__t {
  margin: 0 0 10px; font-family: 'Frank Ruhl Libre', Georgia, serif;
  font-size: 1.0625rem; color: #1E332C;
  padding-block-end: 9px; border-block-end: 1px solid rgba(22, 33, 29, 0.14);
}
.a11y__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.a11y__opt {
  width: 100%; min-height: 44px; padding: 0 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: none; border: 1px solid transparent; border-radius: 3px;
  font-family: inherit; font-size: 14.5px; color: #16211D;
  text-align: start; cursor: pointer;
  transition: background-color 200ms ease-out;
}
.a11y__opt:hover { background: rgba(184, 162, 125, 0.16); }
.a11y__opt::after {
  content: ""; flex: 0 0 auto;
  width: 34px; height: 19px; border-radius: 100px;
  background: rgba(22, 33, 29, 0.18); position: relative;
  transition: background-color 200ms ease-out;
}
.a11y__opt::before {
  content: ""; position: absolute; inset-inline-end: 14px;
  width: 15px; height: 15px; border-radius: 50%; background: #F9F7F2;
  transform: translateX(0); transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}
.a11y__opt[aria-pressed="true"]::after { background: #1E332C; }
.a11y__opt[aria-pressed="true"]::before { transform: translateX(-15px); }

.a11y__reset {
  width: 100%; min-height: 44px; margin-block-start: 10px;
  background: none; border: 1px solid rgba(22, 33, 29, 0.2); border-radius: 3px;
  font-family: inherit; font-size: 14px; color: #4B5A54; cursor: pointer;
}
.a11y__reset:hover { border-color: #1E332C; color: #1E332C; }
.a11y__st {
  display: block; text-align: center; margin-block-start: 9px;
  font-size: 13px; color: #6E5E39; min-height: 40px; line-height: 40px;
}
.a11y :focus-visible { outline: 2px solid #6E5E39; outline-offset: 2px; }

/* ------------------------------------------------------------ the modes -- */
html.a11y-big    body { font-size: 118%; }
html.a11y-bigger body { font-size: 140%; }
html.a11y-big    h1, html.a11y-big    h2, html.a11y-big    h3,
html.a11y-bigger h1, html.a11y-bigger h2, html.a11y-bigger h3 { line-height: 1.25; }

html.a11y-spacing body { line-height: 2 !important; letter-spacing: 0.02em; }
html.a11y-spacing p, html.a11y-spacing li { margin-block-end: 0.9em; }

html.a11y-readable body,
html.a11y-readable h1, html.a11y-readable h2, html.a11y-readable h3,
html.a11y-readable .disp, html.a11y-readable .stmt {
  font-family: Arial, 'Segoe UI', system-ui, sans-serif !important;
  letter-spacing: normal !important;
}

html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; }
html.a11y-links a:focus-visible, html.a11y-links a:hover { background: #FFF3C4; color: #16211D !important; }

html.a11y-cursor, html.a11y-cursor * {
  cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M6 2l24 16-11 2 6 12-5 3-6-12-8 7z' fill='%23101D19' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 4 2, auto;
}

html.a11y-stop *, html.a11y-stop *::before, html.a11y-stop *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.a11y-stop video { display: none !important; }

/* High contrast. Deliberately not a filter:invert — that wrecks photographs
   and produces unreadable mid-greys. This restates the palette at maximum
   separation and drops decorative imagery behind text. */
html.a11y-contrast body { background: #000 !important; color: #fff !important; }
html.a11y-contrast .ed, html.a11y-contrast .hx, html.a11y-contrast .fin,
html.a11y-contrast .ft, html.a11y-contrast .wk, html.a11y-contrast .wh,
html.a11y-contrast .door, html.a11y-contrast .panel, html.a11y-contrast .doc__sheet,
html.a11y-contrast .cover, html.a11y-contrast .cover__frame {
  background: #000 !important; color: #fff !important;
}
html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3,
html.a11y-contrast p, html.a11y-contrast span, html.a11y-contrast li,
html.a11y-contrast td, html.a11y-contrast th, html.a11y-contrast label,
html.a11y-contrast .micro, html.a11y-contrast .copy, html.a11y-contrast .lead {
  color: #fff !important;
}
html.a11y-contrast a { color: #FFE87A !important; text-decoration: underline !important; }
html.a11y-contrast .btn, html.a11y-contrast button, html.a11y-contrast input,
html.a11y-contrast select, html.a11y-contrast textarea {
  background: #000 !important; color: #fff !important; border-color: #fff !important;
}
html.a11y-contrast .hx__silk, html.a11y-contrast .hx__depth, html.a11y-contrast .hx__glow,
html.a11y-contrast .hx__veil, html.a11y-contrast .hx__vig, html.a11y-contrast .door__bg,
html.a11y-contrast .door__veil, html.a11y-contrast .door__dim, html.a11y-contrast .plate-video,
html.a11y-contrast .ab__plate::after { display: none !important; }
html.a11y-contrast .ft__giant { color: #fff !important; }

@media print { .a11y { display: none !important; } }