/* ═══════════════════════════════════════════════════════════════════════════
   מגנוליה — the accessibility layer.  (step 12 · legal-shield-il)
   Loaded on EVERY page, including the home page, because two of the items
   below are Level A of the standard the accessibility statement names — and a
   published conformance claim contradicted by one line of markup is exactly
   the exposure we found on their live site.
   No new colour, no new radius, no new shadow: tokens only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── skip link — WCAG 2.4.1 Bypass Blocks, Level A ──────────────────────
   Invisible until focused, never display:none — that would remove it from the
   tab order and defeat the entire point. */
.skip{
  position:fixed; inset-inline-start:var(--rail); top:0; z-index:99;
  transform:translateY(-120%);
  background:var(--c-ink-deep); color:var(--c-ground);
  padding:12px 22px; font-size:var(--t-meta); border-radius:0;
}
.skip:focus{ transform:translateY(0); outline:2px solid var(--c-ink); outline-offset:2px; }

/* ── focus — WCAG 2.4.7, Level AA ───────────────────────────────────────
   :focus-visible only, so a mouse click on a product card paints no ring, but
   every keyboard route through the site is traceable. The indicator itself has
   to meet contrast — 2px of --c-ink at 15.08:1 on the ground — which is the
   part usually skipped. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--c-ink); outline-offset:3px;
}
.foot :where(a,button):focus-visible{ outline-color:var(--c-ground); }

/* ── the accessibility control ─────────────────────────────────────────
   Deliberately NOT an overlay widget: an overlay that repaints contrast and
   injects ARIA over broken markup makes a claim about the document that is not
   true of it. Two switches, both of which change the document itself. */
.a11y{ position:fixed; inset-block-end:0; inset-inline-start:0; z-index:60; }
.a11y__t{
  font:inherit; font-size:var(--t-meta); color:var(--c-ground);
  background:var(--c-ink-deep); border:0; border-radius:0;
  padding:11px 18px; cursor:pointer;
}
.a11y__p{
  position:absolute; inset-block-end:100%; inset-inline-start:0; width:264px;
  background:var(--c-ground); border:1px solid var(--c-ink); padding:20px;
}
.a11y__p[hidden]{ display:none; }
.a11y__h{ font-size:var(--t-meta); color:var(--c-ink-muted); margin:0 0 12px; }
.a11y__row{ display:flex; gap:8px; margin-bottom:16px; }
.a11y__b{
  flex:1 1 auto; font:inherit; font-size:var(--t-meta); color:var(--c-ink);
  background:transparent; border:1px solid var(--c-line); border-radius:0;
  padding:9px 6px; cursor:pointer;
}
.a11y__b[aria-pressed="true"]{
  border-color:var(--c-ink); background:var(--c-ground-sunk);
  font-variation-settings:'wght' 600;
}
.a11y__note{ font-size:var(--t-meta); color:var(--c-ink-muted); margin:0; line-height:1.45; }
.a11y__note a{ border-bottom:1px solid var(--c-line); }

/* ── text size ─────────────────────────────────────────────────────────
   The type tokens are px by design — a 380px display letter cannot be a rem —
   so enlargement re-derives the scale instead of scaling the root. The display
   letter is deliberately NOT enlarged: at 420px it already fills the frame,
   and growing it would push the caption off the first screen. */
:root[data-text="lg"]{
  --t-head:clamp(34px,4.6vw,76px); --t-sub:clamp(24px,2.1vw,34px);
  --t-lead:22px; --t-body:20px; --t-meta:16px;
}
:root[data-text="xl"]{
  --t-head:clamp(32px,4.2vw,68px); --t-sub:clamp(24px,2vw,32px);
  --t-lead:24px; --t-body:23px; --t-meta:18px;
}

/* ── stop motion — WCAG 2.2.2, and the CONTRACT ────────────────────────
   This block stops everything CSS owns. The motion, sound and 3D layers own
   the rest and subscribe to the same signal — see the header of /a11y.js. */
:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after{
  animation:none !important; transition:none !important;
  /* lib/light.js phases individual surfaces by writing --sheen as an INLINE
     custom property on each one (light.js:92, :173), so pinning it on :root is
     not enough — the per-element value shadows it. An author !important beats a
     normal inline declaration, which is the only reason this works. */
  --sheen:0 !important;
}
:root[data-motion="off"]{
  scroll-behavior:auto !important;
  /* THE LAMP, pinned at rest. lib/light.js drives the whole page from these
     four custom properties on <html> via rAF — which is not a CSS animation, so
     `animation:none` cannot touch it. An author !important beats a normal
     inline declaration, so setProperty() on documentElement loses to this.
     Pinning the TOKENS rather than naming surfaces means every lit surface that
     gets added later is covered on the day it is written. */
  --sheen:0 !important; --energy:0 !important;
  --key-x:0 !important; --key-y:0 !important; --lx:.5 !important;
  /* --az matters as much as --sheen and is easy to miss. The streak is a
     repeating-linear-gradient(var(--az), …); light.js drifts the angle
     independently of the travel, so with --sheen pinned and --az free the
     specular STILL crawls — measured at 107.39° → 108.11° over 1.5s, which
     rendered as 4.2% of pixels moving in a stopped page. Back to the measured
     key angle, 105°. */
  --az:105deg !important;
}
:root[data-motion="off"] .hero__band::after{ transform:translateX(0) !important; }

/* ⚠ INTERIM — delete this block the day the scene and grain layers subscribe.
   Measured 13.8.2026 with the switch thrown: pixels changing at rest went from
   14.4% to 9.0%. The CSS side is fully at rest; the remaining 9% is two
   rAF-driven canvases (.scene__canvas and the grain overlay) that were written
   in parallel and do not yet listen for 'magnolia:motion'.
   CSS cannot pause a canvas — the only thing it can do is stop it being seen.
   WCAG 2.2.2 is LEVEL A and /accessibility/ states that this switch stops the
   motion on the whole page, so it has to be true today rather than after the
   next integration. Verified: the hero degrades to its designed static
   composition underneath — the photographed band and the ל, both real DOM.
   ⚠ If a canvas ever carries PRODUCT content (the 3D necklace in section 3),
   it must subscribe and freeze, never be hidden by this rule. */
:root[data-motion="off"] canvas{ visibility:hidden; }

/* ── inline links in body copy ─────────────────────────────────────────
   WCAG 1.4.1: colour alone may not be the only way to identify a link. This
   system sets a{color:inherit}, so an inline link has NO colour cue at all —
   the rule under it is the entire affordance, not decoration. */
.pers__note{ margin-top:26px; }
.pers__note a,.net__note a{ border-bottom:1px solid var(--c-ink-muted); }

@media (max-width:900px){
  .a11y__p{ width:min(84vw,264px); }
}
@media print{ .a11y,.skip{ display:none; } }