/* ============================================================
   lowercase · accessibility menu
   Floating trigger (bottom-left) + panel with persistent display
   settings. Self-contained: works on any page that includes
   /a11y.css + /a11y.js. Mirrors the west10west.com menu.
   ============================================================ */
:root{
  --a11y-paper:#f4f2c9;
  --a11y-ink:#43332f;
  --a11y-soft:#6c574f;
  --a11y-gold:#d99a4e;
  --a11y-hair:#ddd5ab;
  --a11y-z:650; /* above agegate (400) + passgate (500) so it's always reachable */
}

/* ---------- trigger ---------- */
.a11y-trigger{
  position:fixed;
  left:18px;
  bottom:max(18px,env(safe-area-inset-bottom));
  z-index:var(--a11y-z);
  width:50px;height:50px;
  border-radius:50%;
  background:var(--a11y-ink);
  color:var(--a11y-paper);
  border:1px solid var(--a11y-gold);
  display:flex;align-items:center;justify-content:center;
  padding:0;margin:0;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  transition:transform .24s ease,background .24s ease;
  -webkit-tap-highlight-color:transparent;
}
.a11y-trigger:hover{transform:scale(1.05);background:#2e221f}
.a11y-trigger:focus-visible{outline:2px solid var(--a11y-gold);outline-offset:3px}
.a11y-trigger svg{width:26px;height:26px;display:block}

/* ---------- panel ---------- */
.a11y-panel{
  position:fixed;
  left:18px;
  bottom:max(80px,calc(env(safe-area-inset-bottom) + 62px));
  z-index:calc(var(--a11y-z) + 1);
  width:280px;
  max-width:calc(100vw - 36px);
  max-height:calc(100vh - 110px);
  overflow-y:auto;
  box-sizing:border-box;
  background:var(--a11y-paper);
  color:var(--a11y-ink);
  border:1px solid rgba(217,154,78,.45);
  box-shadow:0 16px 48px rgba(0,0,0,.28);
  padding:18px 18px 16px;
  font-family:inherit;
  font-size:13px;
  line-height:1.4;
  text-align:left;
  transform:translateY(14px);
  opacity:0;
  visibility:hidden;
  transition:transform .3s cubic-bezier(.2,.6,.2,1),opacity .3s ease,visibility 0s linear .3s;
}
.a11y-panel.is-open{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  transition:transform .3s cubic-bezier(.2,.6,.2,1),opacity .3s ease,visibility 0s;
}
.a11y-panel:focus{outline:none}
.a11y-panel *{box-sizing:border-box}
.a11y-panel__head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:12px;padding-bottom:10px;
  border-bottom:1px solid var(--a11y-hair);
}
.a11y-panel__title{
  margin:0;font-weight:400;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--a11y-soft);
}
.a11y-panel__close{
  background:transparent;border:0;padding:2px 6px;margin:0;
  font-size:20px;line-height:1;cursor:pointer;color:var(--a11y-ink);
  font-family:inherit;
}
.a11y-panel__close:hover{color:var(--a11y-gold)}
.a11y-panel__section{margin-bottom:12px}
.a11y-panel__label{
  display:block;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--a11y-soft);margin-bottom:8px;
}
.a11y-sizes{display:flex;gap:6px}
.a11y-sizes button{
  flex:1;
  background:transparent;
  border:1px solid rgba(67,51,47,.28);
  border-radius:2px;
  color:var(--a11y-ink);
  padding:8px 0;margin:0;
  cursor:pointer;
  font-family:inherit;font-size:12px;letter-spacing:.04em;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.a11y-sizes button:hover{background:rgba(67,51,47,.07)}
.a11y-sizes button[aria-pressed="true"]{
  background:var(--a11y-ink);color:var(--a11y-paper);border-color:var(--a11y-ink);
}
.a11y-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;
  background:transparent;border:0;border-top:1px solid rgba(67,51,47,.1);
  padding:10px 0;margin:0;
  cursor:pointer;
  font-family:inherit;font-size:13px;letter-spacing:.02em;
  color:var(--a11y-ink);text-align:left;
}
.a11y-toggle:first-of-type{border-top:0}
.a11y-toggle__pill{
  flex:none;
  width:32px;height:18px;border-radius:999px;
  background:rgba(67,51,47,.18);
  position:relative;
  transition:background .2s ease;
}
.a11y-toggle__pill::after{
  content:"";position:absolute;top:2px;left:2px;
  width:14px;height:14px;border-radius:50%;
  background:var(--a11y-paper);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform .2s ease;
}
.a11y-toggle[aria-pressed="true"] .a11y-toggle__pill{background:var(--a11y-gold)}
.a11y-toggle[aria-pressed="true"] .a11y-toggle__pill::after{transform:translateX(14px)}
.a11y-panel__reset{
  width:100%;
  margin:6px 0 0;padding:10px;
  background:var(--a11y-ink);color:var(--a11y-paper);
  border:1px solid var(--a11y-ink);border-radius:2px;
  cursor:pointer;
  font-family:inherit;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  transition:background .2s ease;
}
.a11y-panel__reset:hover{background:#2e221f}
.a11y-panel__note{
  margin:12px 0 0;padding-top:10px;
  border-top:1px solid var(--a11y-hair);
  font-size:11.5px;line-height:1.5;color:var(--a11y-soft);
}
.a11y-panel__note a{color:var(--a11y-ink);text-decoration:underline;text-underline-offset:2px}
.a11y-panel button:focus-visible,
.a11y-panel a:focus-visible{outline:2px solid var(--a11y-gold);outline-offset:2px}

@media (max-width:560px){
  .a11y-trigger{left:12px;bottom:max(12px,env(safe-area-inset-bottom));width:46px;height:46px}
  .a11y-trigger svg{width:24px;height:24px}
  .a11y-panel{left:12px;right:12px;width:auto;max-width:none;bottom:max(70px,calc(env(safe-area-inset-bottom) + 58px))}
}
@media print{.a11y-trigger,.a11y-panel{display:none!important}}

/* ============================================================
   APPLIED STATES — classes set on <html> by /a11y.js
   ============================================================ */

/* text size — the site is px-based, so scale the body rather than
   the root font-size (which would do nothing). */
html.a11y-text-110 body{zoom:1.1}
html.a11y-text-120 body{zoom:1.2}
html.a11y-text-130 body{zoom:1.3}

/* underline links */
html.a11y-underline a{text-decoration:underline!important;text-underline-offset:2px}

/* readable font — Atkinson Hyperlegible, lazy-loaded by a11y.js */
html.a11y-readable-font body,
html.a11y-readable-font body *:not(svg):not(svg *):not(.a11y-trigger *){
  font-family:"Atkinson Hyperlegible",Verdana,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif!important;
}

/* reduce motion — mirrors the site's own prefers-reduced-motion rules
   so the toggle behaves exactly like the OS setting. */
html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-no-motion .reveal{opacity:1;transform:none}
html.a11y-no-motion .wsc span{opacity:1!important}
html.a11y-no-motion .ag-wm,html.a11y-no-motion .ag-tag,html.a11y-no-motion .ag-lead,
html.a11y-no-motion .ag-dob,html.a11y-no-motion .ag-meta,html.a11y-no-motion .ag-enter{opacity:1!important;transform:none!important}
html.a11y-no-motion .ag-rule{width:150px!important}
html.a11y-no-motion .pre .w,html.a11y-no-motion .pre .t{opacity:1}
html.a11y-no-motion .pre .ln{width:200px}
html.a11y-no-motion .pg-input{opacity:1!important;transform:none!important}
html.a11y-no-motion .passgate.play .ag-wm,html.a11y-no-motion .passgate.play .ag-tag,
html.a11y-no-motion .passgate.play .ag-lead,html.a11y-no-motion .passgate.play .ag-enter{opacity:1!important;transform:none!important}
html.a11y-no-motion .passgate.play .ag-rule{width:150px!important}
html.a11y-no-motion .beat-video{display:none}
html.a11y-no-motion .beat .bg{opacity:1}
html.a11y-no-motion .portal-video{display:none}
html.a11y-no-motion .scene-portal{height:auto}
html.a11y-no-motion .pin{position:static;height:auto;display:block;overflow:visible}
html.a11y-no-motion .hero-layer{position:static}
html.a11y-no-motion .portal-layer{display:none}
html.a11y-no-motion .hero{padding:120px 22px 60px}
html.a11y-no-motion .portal-img{transform:none!important}
html.a11y-no-motion video{visibility:hidden}

/* high contrast — black ground, white type, yellow links/buttons.
   The menu itself is excluded and keeps its own (already high-contrast) colours. */
html.a11y-contrast body{background:#000!important;color:#fff!important}
/* backgrounds are handled per-element by a11y.js (only elements that actually
   paint a background get #000, so transparent overlays stay transparent). */
html.a11y-contrast body :where(*:not(.a11y-panel):not(.a11y-panel *):not(.a11y-trigger):not(.a11y-trigger *):not(svg):not(svg *):not(video):not(img):not(picture)){
  color:#fff!important;
  border-color:#fff!important;
  text-shadow:none!important;
  box-shadow:none!important;
  mix-blend-mode:normal!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html.a11y-contrast .grain,html.a11y-contrast .cur{display:none!important}
html.a11y-contrast :where(section,header,footer,nav,main,article,aside,form){background-color:#000!important;background-image:none!important}
html.a11y-contrast .wsc span{opacity:1!important}
html.a11y-contrast video,html.a11y-contrast img,html.a11y-contrast picture{visibility:hidden!important}
html.a11y-contrast a:not(.a11y-panel *){color:#ffff66!important;text-decoration:underline!important;text-underline-offset:2px}
html.a11y-contrast button:not(.a11y-panel *):not(.a11y-trigger),
html.a11y-contrast .btn:not(.a11y-panel *),
html.a11y-contrast .buy:not(.a11y-panel *),
html.a11y-contrast input[type="submit"]{background:#ffff66!important;color:#000!important;border:2px solid #fff!important}
html.a11y-contrast input:not([type="submit"]):not(.a11y-panel *),
html.a11y-contrast select,
html.a11y-contrast textarea{background:#000!important;color:#fff!important;border:1px solid #fff!important;border-radius:0}
html.a11y-contrast input::placeholder,html.a11y-contrast textarea::placeholder{color:#bbb!important}
html.a11y-contrast svg:not(.a11y-trigger svg) [fill]:not([fill="none"]),
html.a11y-contrast svg:not(.a11y-trigger svg) [fill]:not([fill="none"]) *{fill:#fff!important}
html.a11y-contrast svg:not(.a11y-trigger svg) [stroke]:not([stroke="none"]),
html.a11y-contrast svg:not(.a11y-trigger svg) [stroke]:not([stroke="none"]) *{stroke:#fff!important}
html.a11y-contrast svg:not(.a11y-trigger svg){color:#fff!important;fill:#fff}
html.a11y-contrast :focus-visible{outline:3px solid #ffff66!important;outline-offset:3px!important}