/* DR.EPOXY · css/ui.css (owner: infra). On every page (src/partials/head-ui.html), in direction C: paper, ink, hairlines, film.
   Uses C's tokens from css/c.css (--paper --pearl --ink --ink-2 --ink-3 --copper --copper-l --film --display --text --mono --gut).
   1. helpers: .vh (visually hidden), the placeholders (.ph: a value the client still has to confirm; boxed only in review)
   Text sizes come from C's tokens (--fs-xs … --fs-btn, css/c.css :root): nothing here is under 13px.
   2. the cookie notice (src/partials/cookie.html + consent.js)
   3. the accessibility entry points (the floating button, the menu, the footer, the cookie notice) + the menu (a11y.js)
   4. the accessibility modes, classes on <html> (src/partials/head-ui.html before the first paint, then a11y.js):
      a11y-size-1..3, a11y-contrast, a11y-nomotion, a11y-links, a11y-font
   Nothing here moves with the scroll. */

/* =====================================================================================================================
   1. HELPERS
   ===================================================================================================================== */
.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* a placeholder (a value the client still has to confirm): plain text on the public page. In review (?ph=1 → html.ph-review)
   it is framed by a dashed line in the text's own colour (paper or film) */
html.ph-review .ph {
  outline: 1px dashed color-mix(in srgb, currentColor 58%, transparent); outline-offset: 2px; border-radius: 2px;
  background: color-mix(in srgb, currentColor 7%, transparent); -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* a note that only makes sense once the client answers ("…: ממתין לאישור", "___ ימים", the effective date): left out of the
   public page, shown (boxed) in review. Remove the attribute when the real words replace the note. */
html:not(.ph-review) [data-ph-hide] { display: none !important; }
html.ph-review [data-ph-hide] { outline: 1px dashed color-mix(in srgb, currentColor 58%, transparent); outline-offset: 2px; }
@supports not (color: color-mix(in srgb, red, blue)) { html.ph-review .ph { outline-color: rgba(154, 91, 46, .7); background: rgba(154, 91, 46, .08); } }

/* =====================================================================================================================
   2. THE COOKIE NOTICE: a sheet of paper. Desktop: a card at the end side (left) of the screen; phones: a band at the bottom.
   "רק הכרחיות" is as large as "אישור הכול" and on the same row. Not a modal: the page stays usable.
   ===================================================================================================================== */
.cc {
  position: fixed; z-index: 45; left: var(--gut, 16px); bottom: 24px; width: min(26.5rem, calc(100vw - 2 * var(--gut, 16px)));
  max-height: calc(100vh - var(--hdr, 58px) - 48px); max-height: calc(100svh - var(--hdr, 58px) - 48px); overflow: auto; overscroll-behavior: auto;
  color: var(--ink); background: var(--pearl) url(../assets/paper.webp) 0 0 / 256px 256px;
  box-shadow: 0 0 0 1px rgba(20, 18, 16, .2), 0 30px 60px -34px rgba(20, 18, 16, .55);
  border-radius: 2px; font-family: var(--text);
  /* (pass 5) it arrives and leaves with opacity only, 200 ms: no slide, so nothing on the page sees it move */
  opacity: 0; transition: opacity .2s cubic-bezier(.23, 1, .32, 1);
}
/* (pass 7) the wheel over the bar scrolls the page: it never scrolls itself (72 px of content in 72 px), and "contain" made
   Chrome stop the page under it (the pass-6 wheel trap). Only the expanded settings card can overflow, so only it contains */
.cc.is-custom { overscroll-behavior: contain; }
.cc[hidden] { display: none; }
.cc.is-in { opacity: 1; }
/* (pass 4: unanswered and where it would cover screen 1, or (pass 5) on the home's live stage while the opening moves, the bar
   stands aside: out of sight in its place; consent.js, .is-aside. It returns as soon as that is over) */
.cc.is-in.is-aside {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s cubic-bezier(.23, 1, .32, 1), visibility 0s linear .2s;
}
.cc__card { padding: 20px 22px 18px; }
.cc__head { display: flex; align-items: center; gap: 12px; min-height: 32px; }
/* a small window into the film: the notice belongs to the same paper */
.cc__puck {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--film) url(../assets/ui/cc-puck.webp) 50% 50% / cover;   /* a crop of the film's poster (assets/film/film-m1080) */
  box-shadow: inset 0 0 0 1px rgba(20, 18, 16, .35);
}
.cc__t { flex: 1; margin: 0; font: 900 26px/1 var(--display); font-stretch: 62.5%; letter-spacing: .005em; }
.cc__t:focus { outline: none; }
.cc__t:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.cc__x {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -10px -8px -8px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer;
}
.cc__x[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .cc__x:hover { color: var(--ink); background: rgba(20, 18, 16, .06); } }
.cc__x svg { width: 20px; height: 20px; }
.cc__text { margin: 12px 0 0; font: 400 var(--fs-s)/1.6 var(--text); color: var(--ink-2); }
.cc__lede { color: var(--ink); }
.cc__link {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 1px;
  text-underline-offset: 4px; padding-block: 10px; white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .cc__link:hover { color: var(--copper-t, #8A5129); } }
.cc__prefs { display: grid; margin: 14px 0 0; padding: 0; border: 0; min-width: 0; border-top: 1px solid rgba(20, 18, 16, .16); }
.cc__prefs[hidden] { display: none; }
.cc__opt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px;
  padding: 12px 0; border-bottom: 1px solid rgba(20, 18, 16, .16);
}
.cc__opt-n { grid-column: 1; grid-row: 1; font: 500 var(--fs-s)/1.3 var(--text); color: var(--ink); cursor: pointer; }
.cc__opt-d { grid-column: 1 / -1; grid-row: 2; margin: 2px 0 0; font: 400 var(--fs-xs)/1.55 var(--text); color: var(--ink-2); }
/* a switch: a hairline track, an ink bead; on = ink track, paper bead */
.cc__sw {
  grid-column: 2; grid-row: 1; -webkit-appearance: none; appearance: none; position: relative; margin: 0; flex: none;
  width: 44px; height: 26px; border-radius: 999px; border: 1px solid rgba(20, 18, 16, .45); background: transparent; cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.cc__sw::before {
  content: ""; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-2);
  transition: transform .35s var(--ease), background-color .3s;
}
.cc__sw:checked { background: var(--ink); border-color: var(--ink); }
.cc__sw:checked::before { transform: translateX(-18px); background: var(--copper-l); }
.cc__sw:disabled { cursor: not-allowed; opacity: .55; }
.cc__sw:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
@media (forced-colors: active) { .cc__sw { -webkit-appearance: auto; appearance: auto; width: 22px; height: 22px; } .cc__sw::before { display: none; } }
.cc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.cc .cc__btn { flex: 1 1 0; min-width: max-content; min-height: 48px; padding: 0 18px; font-size: var(--fs-btn); cursor: pointer; border: 0; }
.cc .cc__btn[hidden] { display: none; }
/* (pass 7, pass-6 item 1) no button in the bar looks like the site's CTA (the filled pill belongs to the WhatsApp CTAs only):
   "אישור הכול", "רק הכרחיות" and "שמירת הבחירה" are the same ink outline on the paper, the same size and weight, so refusing
   is exactly as easy as accepting */
.cc .cc__btn--yes, .cc .cc__btn--save, .cc .cc__btn--no { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .cc .cc__btn--yes:hover, .cc .cc__btn--save:hover, .cc .cc__btn--no:hover { background: rgba(20, 18, 16, .07); } }
.cc .cc__btn:active { transform: scale(.97); }
.cc.is-custom .cc__btn--yes, .cc.is-custom .cc__btn--no { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(20, 18, 16, .5); }
.cc.is-custom .cc__btn--save { order: -1; flex-basis: 100%; }
.cc__more {
  flex-basis: 100%; min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer; text-align: start;
  font: 400 var(--fs-xs)/1 var(--text); color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(20, 18, 16, .35);
}
.cc__more[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .cc__more:hover { color: var(--ink); text-decoration-color: var(--copper); } }
.cc :focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
/* the accessibility button docked in the card (desktop and tablets): the floating button steps aside while the notice is open */
.cc__a11y {
  position: absolute; left: 16px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; margin: 0;
  border-radius: 50%; border: 1px solid rgba(20, 18, 16, .3); background: transparent; color: var(--ink); cursor: pointer;
}
.cc__a11y svg { width: 21px; height: 21px; }
@media (hover: hover) and (pointer: fine) { .cc__a11y:hover { border-color: var(--ink); } }
.cc.is-custom .cc__a11y { display: none; }
/* phones (pass 3): a slim paper bar along the bottom, about 80 px: one line ("עוגיות מדידה ושיווק נפעיל רק אם תאשרו."), then
   the two equal buttons and "התאמה אישית" in one row. The policy link comes with "התאמה אישית" (and is in the footer). The
   floating accessibility button steps aside while it is open. */
@media (max-width: 899px) {
  .cc {
    left: 0; right: 0; bottom: 0; width: auto; border-radius: 0;
    max-height: calc(100svh - var(--hdr, 58px) - env(safe-area-inset-top, 0px) - 12px);
    box-shadow: 0 -1px 0 rgba(20, 18, 16, .22), 0 -18px 40px -26px rgba(20, 18, 16, .45);
  }
  .cc__card { padding: 7px var(--gut, 16px) calc(7px + env(safe-area-inset-bottom, 0px)); }
  .cc:not(.is-custom) .cc__head, .cc:not(.is-custom) .cc__lede { display: none; }
  .cc__head { margin-bottom: 4px; }
  .cc__t { font-size: 22px; }
  .cc__puck { width: 22px; height: 22px; }
  .cc__text { margin: 0; font-size: var(--fs-xs); line-height: 1.4; }
  .cc:not(.is-custom) .cc__text .cc__link { display: none; }
  .cc__link { padding-block: 4px; }
  .cc .cc__a11y { display: none; }
  .cc__actions { flex-wrap: nowrap; gap: 8px; margin-top: 6px; }
  .cc .cc__btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 10px; font-size: var(--fs-btn); }
  .cc__more { flex: 0 0 auto; flex-basis: auto; min-height: 44px; padding: 0 2px; font-size: var(--fs-xs); white-space: nowrap; }
  .cc.is-custom .cc__actions { flex-wrap: wrap; }
  .cc.is-custom .cc__more { display: none; }
  .cc__prefs { margin-top: 6px; }
}
@media (max-width: 374px) { .cc .cc__btn { padding: 0 4px; } .cc__actions { gap: 6px; } }
/* desktop (pass 7, QA-02): a compact card at the end side (bottom left), ~100 px tall, not the full-width strip that sliced every
   screen's last line (the site's headings and CTAs start at the right). One line of text (the policy link in it), then the two
   equal outline buttons, "התאמה אישית" and the docked accessibility button in one row. While a heading, a CTA or a control would
   rest under it, it steps aside (consent.js, decided once the page is still). "התאמה אישית" opens the card with the switches */
@media (min-width: 900px) {
  .cc:not(.is-custom) {
    left: var(--gut, 28px); right: auto; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: min(33rem, calc(100vw - 2 * var(--gut, 28px)));
  }
  .cc:not(.is-custom) .cc__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; padding: 14px 16px 12px; }
  .cc:not(.is-custom) .cc__head, .cc:not(.is-custom) .cc__lede { display: none; }
  .cc:not(.is-custom) .cc__text { grid-column: 1 / -1; margin: 0; font-size: var(--fs-xs); line-height: 1.5; }
  .cc:not(.is-custom) .cc__link { padding-block: 4px; }
  .cc:not(.is-custom) .cc__actions { grid-column: 1; grid-row: 2; flex-wrap: nowrap; margin: 0; gap: 8px; }
  .cc:not(.is-custom) .cc__btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 12px; }
  .cc:not(.is-custom) .cc__more { flex: none; flex-basis: auto; min-height: 44px; padding: 0 4px; white-space: nowrap; }
  .cc:not(.is-custom) .cc__a11y { position: static; grid-column: 2; grid-row: 2; }
  .cc.is-custom { width: min(26.5rem, calc(100vw - 2 * var(--gut, 28px))); }
}
/* a tablet in portrait: a card again, at the end side */
@media (min-width: 600px) and (max-width: 899px) {
  .cc { left: var(--gut, 16px); right: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(28rem, calc(100vw - 2 * var(--gut, 16px))); border-radius: 2px; box-shadow: 0 0 0 1px rgba(20, 18, 16, .2), 0 30px 60px -34px rgba(20, 18, 16, .55); }
  .cc__card { padding-bottom: 14px; }
}
html.menu-open .cc { visibility: hidden; }

/* =====================================================================================================================
   3. THE ACCESSIBILITY ENTRY POINTS + MENU
   ===================================================================================================================== */
/* the entry points ([data-a11y-open]): the floating button (below), the menu's text button beside the guide, the footer,
   the cookie notice's docked button. A dot marks changed settings. */
.menu__a11y.is-set::after { content: ""; position: absolute; top: 50%; right: 0; margin-top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--copper); }

/* the floating button (pass 3, the owner: off the header, somewhere else on the screen): a small paper disc with an ink
   hairline at the bottom end corner (left in RTL), safe-area aware, on every page. It steps aside (fades out) while a call to
   action, a form field, the room's dock, the hero's foot or the cookie notice reaches its corner (a11y.js: an IntersectionObserver
   on that corner band, html.a11y-fab-away), and while the menu, the accessibility menu or the cookie notice is open. Over the
   film (the dive, the pour beat) it dims. */
.a11y-fab {
  position: fixed; z-index: 44; left: max(12px, env(safe-area-inset-left, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--ink); background: var(--pearl); box-shadow: 0 0 0 1px rgba(20, 18, 16, .38), 0 10px 22px -14px rgba(20, 18, 16, .6);
  -webkit-tap-highlight-color: transparent; transition: opacity var(--t-ui) var(--ease-out) 300ms, background-color .25s, color .25s, visibility 0s linear 300ms, transform var(--t-ui) var(--ease-out);
}
.a11y-fab svg { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .a11y-fab:hover { background: var(--ink); color: var(--paper); } }
.a11y-fab:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.a11y-fab.is-set::after { content: ""; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 2px var(--pearl); }
@media (min-width: 900px) { .a11y-fab { left: max(20px, env(safe-area-inset-left, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } }
/* (pass 7) over the dark it steps back through its colours, not its opacity: no element rests half-faded (the half-state check) */
html:is(.hdr-dark, .hdr-hide) .a11y-fab:not(:focus-visible) { background: rgba(244, 239, 231, .58); color: rgba(20, 18, 16, .8); box-shadow: 0 0 0 1px rgba(20, 18, 16, .3); }
@media (hover: hover) and (pointer: fine) { html:is(.hdr-dark, .hdr-hide) .a11y-fab:hover { background: var(--ink); color: var(--paper); } }
html.a11y-fab-away .a11y-fab:not(:focus-visible),
html:is(.menu-open, .a11y-open) .a11y-fab {
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
/* the menus take the corner at once (no cross-fade under them) */
html:is(.menu-open, .a11y-open) .a11y-fab { transition: none; }
/* the cookie notice (pass 7, QA-20): on desktops its card docks its own accessibility button, so the floater gives the corner up
   at once; on phones and tablets (no docked button there) the floater stays, lifted above the notice by its height (--cc-h) */
@media (min-width: 900px) { html.cc-open .a11y-fab { opacity: 0; visibility: hidden; pointer-events: none; transition: none; } }
@media (max-width: 899.98px) { html.cc-open .a11y-fab { transform: translateY(calc(-1 * var(--cc-h, 0px))); } }
/* (pass 7, QA-02) while the notice is up (stepped aside or not) the page gets its height as room at the bottom, so the last line
   is never stuck under it */
html.cc-in body { padding-bottom: var(--cc-h, 0px); }
.menu__more { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin: 0; }
.menu__a11y {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 var(--fs-s)/1.3 var(--text); color: var(--ink-2); text-decoration: underline; text-decoration-color: rgba(20, 18, 16, .3); text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) { .menu__a11y:hover { color: var(--ink); text-decoration-color: var(--copper); } }
.menu__a11y.is-set { padding-inline-start: 12px; }
.menu__a11y.is-set::after { top: 50%; right: 0; margin-top: -3px; }

.a11y-dlg {
  position: fixed; inset: calc(var(--hdr, 58px) + env(safe-area-inset-top, 0px) + 6px) auto auto var(--gut, 16px); transform: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink);
  max-width: none; max-height: none; overflow: visible; color-scheme: light;
}
.a11y-dlg:not([open]) { display: none; }
.a11y-dlg::backdrop { background: rgba(20, 18, 16, .34); }
.a11y-dlg__in {
  width: min(23rem, calc(100vw - 32px)); max-height: calc(100vh - var(--hdr, 58px) - 24px); max-height: calc(100dvh - var(--hdr, 58px) - 24px); overflow: auto; overscroll-behavior: contain;
  padding: 18px 20px 14px; border-radius: 2px; font-family: var(--text);
  background: var(--pearl) url(../assets/paper.webp) 0 0 / 256px 256px;
  box-shadow: 0 0 0 1px rgba(20, 18, 16, .22), 0 40px 80px -40px rgba(20, 18, 16, .7);
}
.a11y-dlg[open] .a11y-dlg__in { animation: a11yIn var(--t-ui) var(--ease-drawer) both; }
@keyframes a11yIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) {
  .a11y-dlg { inset: auto 8px calc(8px + env(safe-area-inset-bottom, 0px)) 8px; transform: none; }
  .a11y-dlg__in { width: auto; max-height: calc(100svh - var(--hdr, 58px) - 24px); }
  @keyframes a11yIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}
@media (min-width: 600px) and (max-width: 899px) { .a11y-dlg { right: auto; } .a11y-dlg__in { width: min(24rem, calc(100vw - 16px)); } }
.a11y-dlg :focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.a11y-dlg__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.a11y-dlg__t { display: flex; align-items: center; gap: 10px; margin: 0; font: 900 32px/1 var(--display); font-stretch: 62.5%; color: var(--ink); }
.a11y-dlg__t svg { width: 26px; height: 26px; flex: none; padding: 4px; border-radius: 50%; color: var(--paper); background: var(--ink); }
.a11y-x { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(20, 18, 16, .25); background: transparent; color: var(--ink); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .a11y-x:hover { border-color: var(--ink); } }
.a11y-x svg { width: 20px; height: 20px; }
.a11y-size { padding: 0 0 12px; border-bottom: 1px solid rgba(20, 18, 16, .16); }
.a11y-size__l { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; font: 500 var(--fs-s)/1.3 var(--text); color: var(--ink); }
.a11y-size__v { font: 500 var(--fs-xs)/1 var(--mono); letter-spacing: .04em; color: var(--copper-t, #8A5129); }
.a11y-size__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-step {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 6px 10px;
  border-radius: 999px; border: 1px solid rgba(20, 18, 16, .35); background: transparent; color: var(--ink);
  cursor: pointer; font: 400 var(--fs-s)/1.25 var(--text); transition: border-color .25s, background-color .25s;
}
@media (hover: hover) and (pointer: fine) { .a11y-step:hover { border-color: var(--ink); background: rgba(20, 18, 16, .04); } }
.a11y-step svg { width: 18px; height: 18px; flex: none; color: var(--copper); }
.a11y-step[aria-disabled="true"] { opacity: .4; cursor: default; }
@media (hover: hover) and (pointer: fine) { .a11y-step[aria-disabled="true"]:hover { border-color: rgba(20, 18, 16, .35); background: transparent; } }
.a11y-size__dots { display: flex; justify-content: center; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; direction: ltr; }
.a11y-size__dots li { width: 18px; height: 2px; background: rgba(20, 18, 16, .18); transition: background-color .3s; }
.a11y-size__dots li.is-on { background: var(--copper); }
.a11y-list { display: grid; margin: 0; padding: 0; list-style: none; }
.a11y-list li { border-bottom: 1px solid rgba(20, 18, 16, .16); }
.a11y-tg {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; min-height: 54px; padding: 6px 0; border: 0; background: transparent; color: var(--ink);
  cursor: pointer; text-align: start; font: 400 var(--fs-s)/1.3 var(--text);
}
@media (hover: hover) and (pointer: fine) { .a11y-tg:hover .a11y-tg__l { text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: 4px; } }
.a11y-tg__ico { width: 22px; height: 22px; color: var(--copper); }
.a11y-tg__s { display: flex; align-items: center; gap: 8px; font: 400 var(--fs-xs)/1 var(--text); color: var(--ink-2); }
.a11y-tg__s i { position: relative; width: 40px; height: 24px; border-radius: 999px; border: 1px solid rgba(20, 18, 16, .45); background: transparent; transition: background-color .3s, border-color .3s; }
.a11y-tg__s i::before { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-2); transition: transform .35s var(--ease), background-color .3s; }
.a11y-on { display: none; }
.a11y-tg[aria-pressed="true"] .a11y-on { display: inline; color: var(--ink); }
.a11y-tg[aria-pressed="true"] .a11y-off { display: none; }
.a11y-tg[aria-pressed="true"] .a11y-tg__s i { background: var(--ink); border-color: var(--ink); }
.a11y-tg[aria-pressed="true"] .a11y-tg__s i::before { transform: translateX(-16px); background: var(--copper-l); }
.a11y-dlg__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; }
.a11y-reset {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(20, 18, 16, .35); background: transparent; color: var(--ink); cursor: pointer; font: 400 var(--fs-s)/1 var(--text);
}
@media (hover: hover) and (pointer: fine) { .a11y-reset:hover { border-color: var(--ink); } }
.a11y-reset svg { width: 18px; height: 18px; color: var(--copper); }
.a11y-stmt {
  display: inline-flex; align-items: center; min-height: 44px; font: 500 var(--fs-s)/1 var(--text); color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) { .a11y-stmt:hover { color: var(--copper-t, #8A5129); } }

/* (pass 4) touch: no double-tap-zoom wait on these controls (the text-size steps are tapped in a row), and a press state of
   their own, since the page has no tap highlight (css/c.css; the .btn buttons scale there). The hovers above need a real pointer */
:is(.cc__x, .cc__more, .cc__link, .cc__a11y, .a11y-fab, .menu__a11y, .a11y-x, .a11y-step, .a11y-tg, .a11y-reset, .a11y-stmt) { touch-action: manipulation; }
:is(.cc__x, .cc__more, .cc__link, .cc__a11y, .menu__a11y, .a11y-x, .a11y-tg, .a11y-reset, .a11y-stmt, .a11y-step:not([aria-disabled="true"])):active { opacity: .62; }
.a11y-fab:active { transform: scale(.94); }

/* =====================================================================================================================
   4. THE ACCESSIBILITY MODES
   ===================================================================================================================== */
/* text size. C sets its sizes in px, so the text is scaled where it is read: every text block (paragraphs, list items,
   labels, buttons, captions, form fields) is zoomed, once (never a block inside another zoomed block). The display type
   (the fitted lines the stage draws, the bands, the menu's words, the numerals) keeps its size: it is already huge.
   The fixed header keeps its size too (its row must fit 320 px at every setting). A section can opt an element out with
   [data-a11y-noscale]. */
html.a11y-size-1 { --a11y-k: 1.15; }
html.a11y-size-2 { --a11y-k: 1.3; }
html.a11y-size-3 { --a11y-k: 1.5; }
html:is(.a11y-size-1, .a11y-size-2, .a11y-size-3) body :is(p, li, dt, dd, label, legend, summary, figcaption, caption, th, td, blockquote, small, h3, h4, .btn, .lnk, .kick, button, input, select, textarea):not(:is(p, li, dt, dd, label, legend, summary, figcaption, caption, th, td, blockquote, small, h3, h4, .btn, .lnk, .kick, button) *):not(.hdr *, .menu__list li, .menu__list li *, [aria-hidden="true"], [aria-hidden="true"] *, [data-a11y-noscale], [data-a11y-noscale] *, .a11y-dlg *, .cc *, .a11y-fab) {
  zoom: var(--a11y-k);
}
/* bigger text needs room: one-line labels may wrap, and nothing may push the page sideways */
html:is(.a11y-size-1, .a11y-size-2, .a11y-size-3) body :is(.btn, .lnk, .hero__eyebrow, .kick) { white-space: normal; max-width: 100%; }
html:is(.a11y-size-1, .a11y-size-2, .a11y-size-3) body :is(.btn) { height: auto; padding-block: 10px; text-align: center; }
/* (pass 7) v8's opening rules that stood here (the sample window's height and the swatch rows at 115 / 130 / 150 %) went with
   the opening (archive/v8-2026-10-24/, archive/opening-v8/). The new hero's type sits at the bottom of a 100svh screen and
   grows upward with the text size: checked at 150 % on 320 × 640 to 1920 × 1080 (docs/pass7/core.md) */
html:is(.a11y-size-2, .a11y-size-3) .cc__text, html:is(.a11y-size-2, .a11y-size-3) .cc__opt-d, html:is(.a11y-size-2, .a11y-size-3) .a11y-tg { font-size: max(17px, var(--fs-body)); }

/* underline links */
html.a11y-links a { text-decoration-line: underline !important; text-decoration-thickness: max(1px, .07em) !important; text-underline-offset: .2em !important; }
html.a11y-links a .menu__w { text-decoration: underline; }

/* readable font: the reading and label faces become Arial (the display type keeps its face: the stage draws it) */
html.a11y-font { --text: Arial, 'Arial Hebrew', 'Noto Sans Hebrew', 'Segoe UI', sans-serif; --mono: Arial, 'Arial Hebrew', 'Noto Sans Hebrew', sans-serif; }
html.a11y-font body { font-family: var(--text); }
html.a11y-font body :is(input, select, textarea, button) { font-family: var(--text); }
html.a11y-font body :is(.kick, .menu__k, .menu__n, .logo__cap, .cc__more, .a11y-tg__s, .a11y-size__v) { letter-spacing: normal !important; }

/* stop animations: the page's still path (html.rm is added with it: css/c.css + js/main.js), and every animation and
   transition anywhere stops; content that waits to "arrive" is simply there */
html.a11y-nomotion { scroll-behavior: auto !important; }
html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
  transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
html.a11y-nomotion :is([data-in], .rv) { opacity: 1 !important; transform: none !important; }

/* high contrast: black, white and yellow, no imagery behind text, every control outlined. The still page (html.static, the
   stage switched off) is the base: the hero's letters and the pour beat read as plain type */
html.a11y-contrast { color-scheme: dark; --paper: #000; --paper-2: #000; --pearl: #000; --ink: #fff; --ink-2: #fff; --ink-3: #e6e6e6; --copper: #FFE14D; --copper-l: #FFE14D; --film: #000; }
html.a11y-contrast, html.a11y-contrast body { background: #000 !important; color: #fff !important; }
html.a11y-contrast body :not(svg, svg *, img, video, canvas, picture, iframe) {
  color: #fff !important; -webkit-text-fill-color: #fff !important; background-color: transparent !important; background-image: none !important;
  text-shadow: none !important; box-shadow: none !important; border-color: #fff !important; outline-color: #FFE14D !important;
  mix-blend-mode: normal !important; filter: none !important; -webkit-text-stroke: 0 !important;
}
html.a11y-contrast body *::before, html.a11y-contrast body *::after { background-image: none !important; box-shadow: none !important; }
html.a11y-contrast body :is(.hdr, .menu, .cc, .a11y-dlg__in, .skip, dialog, input, select, textarea, .btn, button) { background-color: #000 !important; }
html.a11y-contrast .hdr::before { background: #000 !important; }
html.a11y-contrast .hero__h1, html.a11y-contrast .artist__h { opacity: 1 !important; }
html.a11y-contrast body a[href], html.a11y-contrast body a[href] * { color: #FFE14D !important; -webkit-text-fill-color: #FFE14D !important; }
html.a11y-contrast a:not(.btn) { text-decoration-line: underline !important; }
html.a11y-contrast :is(.btn, summary, input, select, textarea, .cc, .a11y-dlg__in, .cc__sw, .a11y-tg__s i, .toc) { border: 2px solid #fff !important; }
html.a11y-contrast :is(button:not(.burger, .menu__a11y, .toc__toggle, .cc__more, .a11y-tg)) { border: 2px solid #fff !important; }
html.a11y-contrast body .cc .cc__btn:is(.cc__btn--yes, .cc__btn--save) { background-color: #FFE14D !important; color: #000 !important; -webkit-text-fill-color: #000 !important; border-color: #FFE14D !important; }
html.a11y-contrast :is(.burger__i i, .a11y-size__dots li) { background-color: #fff !important; }
html.a11y-contrast .a11y-size__dots li.is-on { background-color: #FFE14D !important; }
html.a11y-contrast :is(.cc__sw:checked, .a11y-tg[aria-pressed="true"] .a11y-tg__s i) { background-color: #FFE14D !important; border-color: #FFE14D !important; }
html.a11y-contrast .cc__sw::before, html.a11y-contrast .a11y-tg__s i::before { background: #fff !important; }
html.a11y-contrast .cc__sw:checked::before, html.a11y-contrast .a11y-tg[aria-pressed="true"] .a11y-tg__s i::before { background: #000 !important; }
html.a11y-contrast.ph-review .ph { outline: 1px dashed #FFE14D !important; }
html.a11y-contrast :focus-visible { outline: 3px solid #FFE14D !important; outline-offset: 3px !important; }

@media (prefers-reduced-motion: reduce) {
  .cc { transition: none; }
  .a11y-dlg[open] .a11y-dlg__in { animation: none; }
}