/* ═══════════════════════════════════════════════════════════════════════════
   מגנוליה — the token layer.
   Every value here is derived in BRAND-DIRECTION.md and measured, not felt.
   Do not add a token by eye; go back to that file and derive it.

   ⚠ FONT LICENCE: the file loaded below is a Fontef type-tester, EVALUATION
   ONLY. It must not be deployed. Shipping needs a Narkiss Block licence
   (3 static styles, ₪1,500 base × traffic multiplier). Swap the @font-face
   src and nothing else changes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Two real subsets, not one variable file served twice. Measured 13.8.2026:
   shipping the whole 136.6KB VF put the critical path at 217KB gzip against a
   124KB budget — and the 3D scene was NOT the thing over budget, the font was.
   136.6KB → 12.5KB on the one file that blocks first paint.

   ⚠ It stays VARIABLE. Instancing it to wght 400 got it to 3.7KB and silently
   broke every section heading: .sect__head asks for 600, and a static 400 cut
   just ignores it. Nine headings would have shipped at the wrong weight with
   no error anywhere. The axis is kept; only the glyph set is cut. */
@font-face{
  font-family:"Magnolia Display";
  src:url("/fonts/narkiss-display-VF.woff2") format("woff2-variations");
  font-weight:300 600; font-style:normal;
  font-display:block;            /* preloaded and 12.5KB; a swap at 380px is a visible jolt */
  /* The 22 letters and finals, plus ׳ ״ ־ — Hebrew punctuation that appears
     INSIDE display words (הא״ב). Leaving it out sent the gershayim to the UI
     face, so one heading rendered in two fonts at two weights. */
  unicode-range:U+05D0-05EA,U+05BE,U+05F3,U+05F4;
}
@font-face{
  font-family:"Magnolia";
  src:url("/fonts/narkiss-ui-VF.woff2") format("woff2-variations");
  font-weight:300 600; font-style:normal; font-display:swap;
}

:root{
  /* --- colour: ONE hue, h 148. Measured off Magnolia's own paper. -------
     Their most-used greige sits 16° from their gold and blush 22° — both
     camouflage the product. Sage is 90° away. That is why it is sage. */
  --c-ground:       #f0f5f0;   /* >50% of the frame */
  --c-ground-sunk:  #e3ece4;
  --c-paper-deep:   #bec9bf;   /* GRADE TARGET for photography, and a real surface */
  --c-line:         #d1d9d2;   /* the only border in the system */
  --c-ink-muted:    #596a5c;   /* TEXT on the LIGHT surfaces only. 5.23:1 on ground */
  --c-ink:          #152117;   /* 15.08:1 on ground · 9.75:1 on --c-paper-deep */
  --c-ink-deep:     #19291c;   /* the one dark surface */
  /* NO gold token. NO red token. Gold is photographed metal, never CSS. */

  /* ── #97a499, twice, and the duplication is the point ───────────────────
     There used to be one token here called --c-ink-faint, and it had been
     pulled out of three text roles for failing contrast — .cat__l, the search
     placeholder, and the engraving field label in the style frames. It kept
     happening because the name was a lie of omission. Measured against every
     surface in this system:

         on --c-ground 2.35   --c-ground-sunk 2.15   --c-paper-deep 1.52
         on --c-line   1.80   --c-ink-muted   2.22
         on --c-ink    6.41   --c-ink-deep    5.88

     Illegal as text on five of the seven surfaces, legal on two. And
     --c-ink-muted is the exact mirror — 5.23 on the ground, 2.65 on the
     footer. So the system holds two quiet inks, each legal only on the half
     of the ramp the other one fails, and `--c-ink-faint` announced neither.
     A designer reaching for "the quieter ink" had even odds of shipping a
     contrast failure, which is precisely what the history records.

     The colour was never the defect. The NAME was. So the name now carries the
     permission, and the two jobs are two tokens even though they are one hex —
     because a token in this system is a permission, not a colour. */
  --c-ink-on-deep:  #97a499;   /* TEXT — only on --c-ink-deep (5.88:1) or --c-ink (6.41:1) */
  --c-veil:         #97a499;   /* DECORATION only. Never text. Must be aria-hidden. */

  /* --- type: 6 sizes, 22.4× display:body ------------------------------- */
  --t-display: clamp(132px, 23.75vw, 420px);
  --t-head:    clamp(40px, 5.75vw, 100px);
  --t-sub:     clamp(26px, 2.5vw, 44px);
  --t-lead:    clamp(19px, 1.5vw, 26px);
  --t-body:    17px;
  --t-meta:    13px;

  --lh-display: 1.0;  --lh-head: 1.22; --lh-sub: 1.28;
  --lh-lead: 1.45;    --lh-body: 1.58; --lh-meta: 1.5;

  --tr-display: -0.015em;  --tr-head: -0.01em;  --tr-body: 0;

  /* --- weight: three only. 300→600 IS the hierarchy. ------------------- */
  --w-light: 300; --w-body: 400; --w-strong: 600;
  --w-display: 400;   /* fixed. at 600 the counter halves and ד/ר falls to 16% */

  --gut: 26px;
  --rail: 210px;      /* the right margin the frame was composed on */

  /* ═══ MOTION ═══════════════════════════════════════════════════════════
     THE REGISTER IS PICKED FIRST. The curve is not the craft decision; the
     register is. Median CSS transition duration off shipped stylesheets:
       linear.app 160ms (product UI) · stripe.com 300ms (premium marketing)
       lusion.co  400ms (agency/editorial) · 14islands 1000ms (cinematic)
     This page is two things at once, and pretending it is one is how you get
     the template tell — ONE duration, usually 300ms, applied to everything.
     It is an editorial surface with a cinematic hero AND a 2,215-SKU shop
     where a filter must feel instant. So: two registers, separated on purpose.

       CAMERA   620ms  — section arrival, the crossing. A dramatic reveal is
                         600–1200ms; this sits between lusion and 14islands.
       UI       0–240ms — anything a finger is waiting on. A button at 600ms
                         reads broken, not expensive. Nothing frequent >300ms.

     ⚠ Slow is NOT a luxury constant — Boucheron ships 0.2s ease-in, as fast as
     Linear. Slow correlates with film, not with price. */
  --d-answer:    0ms;   /* hover IN. Linear ships --speed-highlightFadeIn: 0s —
                           the response appears at ZERO latency… */
  --d-settle:  180ms;   /* …and decays over 180. Symmetric feedback is a defect. */
  --d-tap:     110ms;   /* :active — the finger is waiting */
  --d-ui:      240ms;   /* filter repaint, count swap */
  --d-reveal:  620ms;   /* a section arriving — the camera move */
  --d-cross:   900ms;   /* section 4 only */
  --stagger:    64ms;   /* 30–80ms band; total stagger budget ≤500ms */

  /* Easing is chosen, never defaulted, and it differs by ROLE. The single
     mechanical difference between "premium" and "startup" motion is the TAIL:
     IBM Carbon's productive and expressive families differ almost solely in
     the final control point's y — 0.9 vs 1.0. Luxury is the y=1.0 tail, so
     every curve below lands fully at rest. Overshoot 0%, everywhere: bounce
     simulates a light, low-friction object; full damped deceleration
     simulates MASS, and gold is heavy. */
  --e-enter:  cubic-bezier(0.19, 1, 0.22, 1);    /* easeOutExpo — in production
                                                    verbatim on Patek and Van Cleef */
  --e-answer: cubic-bezier(0.23, 1, 0.32, 1);    /* easeOutQuint (power4.out) */
  --e-cross:  cubic-bezier(0.77, 0, 0.175, 1);   /* easeInOutQuart — both ends */
  --e-exit:   cubic-bezier(0.4, 0, 1, 1);        /* ease-in is legal ONLY on the
                                                    way out; never on entry, where
                                                    it delays the exact moment the
                                                    visitor is watching */

  /* ═══ THE LIGHT ════════════════════════════════════════════════════════
     Written by lib/light.js, read by every lit surface. One lamp for the whole
     document — including, when it lands, the WebGL scene, which takes its
     environmentRotation from the same state. Two lights that disagree is how a
     page reads as a collage. */
  --sheen: 0;        /* 0→1, the crawl. Wraps where the streak is off-surface. */
  --key-x: 0;        /* pointer, −1…1 */
  --key-y: 0;
  --lx: .5;          /* pointer x as 0…1 */
  --az: 105deg;      /* MEASURED off Magnolia's own flat-lays: 105.6°, R=0.938
                        on n=7 (paper-falloff estimator). Not a taste. */
  --energy: 0;       /* 0 at rest → 1 under a moving hand */

  --sheen-photo: rgba(255,255,255,.56);  /* on photographs — the picture already
                                            carries its own key; ours assists */
  --sheen-plate: rgba(255,255,255,.62);  /* on flat paper — nothing there yet */
  /* A real key crossing paper is not only a highlight: it is a RAMP, bright on
     one side and falling off on the other. That falloff is the very thing
     keyangle.py measured to get 105.6° (R=0.938) — it is the most reliable
     signal in the photograph. Modelling both sides is honest AND it is the
     difference between visible and invisible on a ground this pale: white over
     near-white changes almost nothing, which is exactly why the first attempt
     at this measured 8.2% of pixels moving and 0.13% of them perceptibly.
     ⚠ Tinted, never neutral and never #000 — there is no black in this system,
     and the contact shadow is specified at #97a499 for the same reason. */
  --sheen-shade: rgba(151,164,153,.34);
  --sp: 1500px;      /* one repeat of the specular along the gradient line */
  --travel: 13s;     /* one repeat per 13s ≈ 115px/s. A crawl, not a shine. */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--c-ground); color:var(--c-ink); -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:"Magnolia", system-ui, sans-serif;
  font-size:var(--t-body); line-height:var(--lh-body);
  font-weight:var(--w-body);
  font-synthesis:none;            /* a missing weight must fail visibly, not be faked */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  hyphens:none;                   /* Hebrew words are short; hyphenation breaks reading */
  letter-spacing:0;               /* tracking on Hebrew reads as EMPHASIS, not style */
}
/* Hebrew has no italic and no small-caps. Never synthesise either. */
i,em,cite{ font-style:normal; font-weight:var(--w-strong); }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
/* Latin runs inside Hebrew lines constantly (NEW · ONLINE ONLY · ₪249). */
.ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block; }

.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  padding:22px var(--rail); font-size:var(--t-meta); font-weight:500;
}
.nav__mark{ font-weight:var(--w-strong); font-size:15px; letter-spacing:-0.01em; }
.nav__links{ display:flex; gap:22px; }
.nav__links a:hover{ color:var(--c-ink-muted); }

/* ── hero — section 1 · 2.0vh ────────────────────────────────────────────
   THE SIGNATURE: display 380px against a jewelry-category median of 40px.
   9.5×, and 0 of 11 sites in the category make this move.

   ⚠ THE LETTER IS A TEXT NODE. It is not an <svg><path>.
   Measured 13.8.2026: the same letter as a converted outline reports 40px to
   the corpus extractor — EXACTLY the category median — so a page with no
   signature at all is indistinguishable from this one. It also costs the page
   its H1 and its text LCP, which is the largest SEO lever a canvas-heavy site
   has. Same picture, but the letter stays a letter.  */
.hero{ position:relative; min-height:200vh; }
.hero__band{
  position:absolute; inset-inline:0; top:0; height:330px; overflow:hidden;
  background:var(--c-paper-deep);
}
.hero__band img{ width:100%; height:100%; object-fit:cover; object-position:62% 40%; }
/* THE SHEEN — the constant that crosses every boundary in the page, and half
   of the PULSE. Gold is only gold because it answers light, so the honest
   idle motion is the highlight crawling over real photographed metal rather
   than a decorative loop. The angle is not chosen: 105° is the key angle
   measured off Magnolia's own flat-lays (paper-falloff estimator, R=0.938),
   so our light travels the same way theirs already does. Driven by
   pulse.idle(); --sheen runs 0→1. */
.hero__band::after{
  content:""; position:absolute; inset:-20% -60%; pointer-events:none;
  background:linear-gradient(105deg,
    transparent 42%,
    rgba(255,255,255,.34) 50%,
    transparent 58%);
  transform:translateX(calc(var(--sheen, 0) * 120% - 60%));
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){ .hero__band::after{ transform:translateX(0); } }

.hero__title{ margin:0; }
.hero__glyph{
  position:absolute; inset-inline-start:var(--rail);   /* RTL: "start" IS the right edge */ top:290px; z-index:2;
  display:block;
  font-family:"Magnolia Display","Magnolia",sans-serif;
  font-size:var(--t-display);
  font-variation-settings:'wght' 400;   /* fixed: 600 halves the counter */
  font-weight:var(--w-display);
  line-height:var(--lh-display);
  letter-spacing:var(--tr-display);
  color:var(--c-ink);
}
/* Clear of the chain, deliberately. The caption and the ל were both hung off
   the same 210px rail, so once the necklace became real geometry it hung
   straight down the column the text lives in — measured 13.8.2026 at 41% of
   the paragraph covered, with "נתלית" crossed out by the strand. Nothing in
   the gate can see that: it is not contrast, not overflow, not motion.
   --chain-clear is the strand's own column, so the two stay separated if the
   rail changes. */
.hero__cap{
  position:absolute;
  --chain-clear:300px;                 /* the strand's own column */
  inset-inline-start:calc(var(--rail) + var(--chain-clear));
  top:632px; width:440px;
}
.hero__name{
  display:block;
  font-size:var(--t-sub); font-variation-settings:'wght' 600;
  font-weight:var(--w-strong); letter-spacing:-0.01em; line-height:var(--lh-sub);
}
.hero__note{
  margin:14px 0 0; font-size:var(--t-lead); line-height:var(--lh-lead);
  font-variation-settings:'wght' 300; font-weight:var(--w-light);
  color:var(--c-ink-muted);
}
.hero__price{ margin-top:20px; font-size:var(--t-sub); font-weight:var(--w-strong); }

/* ── the standing bar: real, verified facts only ─────────────────────── */
.ship{
  position:absolute; inset-inline:0; bottom:0;
  display:flex; justify-content:space-between;
  padding:14px var(--rail);
  font-size:var(--t-meta); color:var(--c-ink-muted);
  border-top:1px solid var(--c-line);
}

/* ── shared section furniture ────────────────────────────────────────── */
.sect__head{
  font-family:"Magnolia Display","Magnolia",sans-serif;
  font-size:var(--t-head); line-height:var(--lh-head);
  letter-spacing:var(--tr-head); font-weight:var(--w-strong);
  font-variation-settings:'wght' 600;
  margin:0 0 40px;
}
section{ padding:110px var(--rail); }

/* ── 2 · הא״ב ──────────────────────────────────────────────────────────
   The letters run at --t-head, not --t-display. Only the hero carries the
   signature: one letter, never a display sentence. Four letters at 380px
   would push first-screen text coverage out of the 6.3–17.1% category band
   and turn the rare move into noise. The extremity lives in the RATIO. */
.alef__list{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gut);
  grid-auto-rows:1fr; }
/* Stretch to a shared row height so the four hairlines land on ONE edge.
   ע's role text wraps to two lines and was dragging its own rule down — in a
   system with no shadows and no radius, a rule that misses the shared edge is
   the only visible defect there is. */
.alef__item{ display:flex; }
.alef__item a{ display:flex; flex-direction:column; width:100%;
  padding-bottom:26px; border-bottom:1px solid var(--c-line); }
.alef__role{ margin-top:auto; padding-top:8px; }
.alef__glyph{
  display:block;
  font-family:"Magnolia Display","Magnolia",sans-serif;
  font-size:var(--t-head); line-height:1; font-weight:var(--w-display);
  font-variation-settings:'wght' 400; letter-spacing:var(--tr-head);
}
.alef__name{ display:block; margin-top:22px; font-size:var(--t-sub); font-weight:var(--w-strong);
  font-variation-settings:'wght' 600; line-height:var(--lh-sub); }
.alef__role{ display:block; font-size:var(--t-meta); color:var(--c-ink-muted);
  line-height:var(--lh-meta); }
.alef__item a:hover .alef__glyph{ color:var(--c-ink-muted); }

/* ── 3 · עיצוב אישי — the configurator ────────────────────────────────── */
.pers__lede{ font-size:var(--t-lead); line-height:var(--lh-lead); font-weight:var(--w-light);
  font-variation-settings:'wght' 300; margin:0 0 56px; }
.pers__rig{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.pers__stage{ min-height:280px; display:flex; align-items:center; }
/* The name at display size. NOT gold: gold is photographed metal only, never a
   CSS colour and never a gradient — that single rule is what keeps this off
   the cheap end of the category. The metal is chosen in the geometry, not here. */
.pers__preview{
  font-family:"Magnolia Display","Magnolia",sans-serif;
  font-size:var(--t-head); line-height:1; font-weight:var(--w-display);
  font-variation-settings:'wght' 400; letter-spacing:var(--tr-display);
  color:var(--c-ink); word-break:keep-all;
}
.pers__preview:empty::after{ content:"—"; color:var(--c-ink-muted); }
.pers__field{ margin-bottom:34px; border:0; padding:0; }
.pers__label{ display:block; font-size:var(--t-meta); color:var(--c-ink-muted); margin-bottom:8px; }
.pers__input{
  width:100%; font:inherit; font-size:var(--t-sub); color:var(--c-ink);
  background:transparent; border:0; border-bottom:1px solid var(--c-ink);
  border-radius:0; padding:8px 0; appearance:none;
}
.pers__input:focus{ outline:0; border-bottom-width:2px; }
.pers__input--n{ max-width:5ch; }
.pers__hint{ margin:8px 0 0; font-size:var(--t-meta); color:var(--c-ink-muted); }
.pers__hint[data-over="1"]{ color:var(--c-ink); font-variation-settings:'wght' 600; }
.pers__opts{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.pers__opt{ font-size:var(--t-body); cursor:pointer; }
.pers__opt input{ accent-color:var(--c-ink); margin-inline-end:7px; }

/* ── 4 · שקט משולם — the crossing. Absence of INFORMATION, not of light. */
.hush{ height:60vh; padding:0; }

/* ── 5 · זהב 14K — the top of the ladder ──────────────────────────────────
   Same geometry as sections 1 and 3, different alloy. The section exists
   because the SKU exists: L24635Y4, Hebrew print letters in yellow 14K. */
.gold__rig{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.gold__stage{ min-height:340px; }
.gold__copy{ position:relative; z-index:2; }
.gold__lede{ font-size:var(--t-lead); line-height:var(--lh-lead);
  font-variation-settings:'wght' 300; font-weight:var(--w-light); margin:0 0 34px; }
.gold__link{ display:block; border-top:1px solid var(--c-line); padding-top:20px; }
.gold__name{ display:block; font-size:var(--t-body); line-height:1.45; }
.gold__pr{ display:block; margin-top:8px; font-size:var(--t-sub);
  font-variation-settings:'wght' 600; font-weight:var(--w-strong); }
.gold__was{ font-size:var(--t-meta); color:var(--c-ink-muted); font-weight:var(--w-body);
  font-variation-settings:'wght' 400; text-decoration:line-through; margin-inline-start:10px; }
.gold__note{ margin:22px 0 0; font-size:var(--t-meta); color:var(--c-ink-muted); }
.gold__link:hover .gold__name{ color:var(--c-ink-muted); }

/* ── THE SCENE ────────────────────────────────────────────────────────────
   One global canvas for the whole document, fixed, never scrolled. The piece
   is placed by the SCENE against real DOM boxes, so it stays welded to the
   letter and to the configurator stage without the canvas ever moving.

   z-index 1, and the letter above it at 2. That single line is the concept's
   depth model: the Hebrew letter is NEVER dimensional — ד and ר differ by one
   corner and the distinction collapses to 16.1% at weight 600 before depth is
   even involved — so the chain passes BEHIND a flat 380px ל and occlusion does
   the work a bevel would have destroyed the script to fake. */
.scene__canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none; opacity:0;
  contain:strict;
}
/* Lift the DOM above the scene canvas. ⚠ `position:relative` must NOT be in
   this list wholesale: .hero__cap and .ship are deliberately ABSOLUTE (top
   632px / bottom 0 of a 200vh hero), and re-declaring position here pulled both
   back into flow — the standing bar jumped 1,450px up the page and landed
   inside the photographed band. Same z-index, composition intact. */
/* ⚠ AND .pers__rig must NOT be in it either. craft.css puts the photographic
   paper (.pers__plate, z-index 0) inside the stage, so lifting the whole rig
   lifted the paper over the canvas and the pendant rendered BEHIND its own
   backdrop — a section that looked deliberately empty. Only the type and the
   controls go up; the paper stays under the metal, which is where paper is. */
.pers__form,.alef__list,.sect__head{ position:relative; z-index:2; }
.hero__cap,.ship{ z-index:2; }

/* ⛔ DEPTH STOPS AT SECTION 6 — and until now only the prose said so.
   The canvas is fixed and full-viewport, so it kept drawing all the way down
   the shop. Measured by diffing canvas-on against canvas-off at nine scroll
   positions: 32.2% of every pixel the canvas draws landed inside a text box.
   At the catalogue, the price ₪289 was 90.6% covered, ₪144.50 55.8%, and the
   הוספה לעגלה button 34.5%. Whole-screen that is 7.80%, and the craft gate
   passed at 99.3% headroom the entire time — a gold chain drawn across the
   prices is invisible to every number we had.

   Two fixes, deliberately belt and braces:
   1. the merchandise is lifted above the canvas, so nothing commercial can
      ever sit under a decorative surface even if the scene misbehaves;
   2. the canvas actually stops, which is what SCENE.md architecture D says
      and is also the honest thing to do with a GPU below the fold.
   The hero is untouched: the chain must still pass BEHIND the flat ל. */
.cat__bar,.cat__rail,.cat__grid,.coll__list,
.net__find,.net__grid,.net__lede,.net__note,
.club__lede,.club__contact,.foot{ position:relative; z-index:2; }

html[data-depth="stopped"] .scene__canvas{
  opacity:0 !important;
  transition:opacity var(--d-reveal, 620ms) var(--e-exit, ease-in);
}
/* The offline poster. Not a blank box, and not a dead one either: the sheen
   below keeps crawling across it in CSS at the same 105 deg. */
.scene__poster{ width:100%; height:auto; max-width:420px; }
.pers__canvas[hidden]{ display:none; }

/* ── 6 · הקטלוג — where the invention has to survive its own boundary ──
   The א–ת rail is the whole argument of this section: the letters that were
   architecture upstairs become the INDEX down here. Same idea, different
   job. Vertical, so it needs none of the dir="ltr" trickery a horizontal
   RTL scroller does. */
/* minmax(0,…) is load-bearing, not tidiness. A bare `1fr` is minmax(AUTO,1fr),
   and auto-min resolves to MIN-CONTENT — which for a replaced element is its
   intrinsic width, 460px, regardless of img{max-width:100%}. Four of those plus
   gaps made the grid 1,918px inside a 1,440px page and pushed the whole
   document to scrollWidth 2,206 (measured 13.8.2026, step 12). A page that
   scrolls sideways at every viewport fails WCAG 1.4.10 Reflow at level AA —
   the level our own accessibility statement claims — and it is also just a
   horizontal scrollbar on a flagship build. */
.cat__rig{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:34px; align-items:start; }
.cat__rail{ display:flex; flex-direction:column; gap:1px;
  position:sticky; top:24px; max-height:78vh; overflow:auto; overscroll-behavior:contain; }
.cat__l{
  font-family:"Magnolia Display","Magnolia",sans-serif;
  font-size:20px; line-height:1.5; font-weight:var(--w-display);
  font-variation-settings:'wght' 400;
  /* was --c-ink-faint. Measured at step 12: #97a499 on the ground is 2.35:1 —
     these are 20px INTERACTIVE controls, so WCAG 1.4.3 wants 4.5:1 and 20px
     regular is not "large text" (that starts at 24px). --c-ink-muted is
     5.22:1. The hierarchy still reads; the letters are simply legible now,
     and the accessibility statement this site publishes stays true. */
  color:var(--c-ink-muted); background:none; border:0; padding:1px 0;
  cursor:pointer; text-align:center; border-radius:0;
}
.cat__l:hover{ color:var(--c-ink-muted); }
.cat__l[aria-pressed="true"]{ color:var(--c-ink); font-variation-settings:'wght' 600; }
.cat__l[disabled]{ color:var(--c-line); cursor:default; }

.cat__bar{ display:flex; align-items:baseline; gap:18px; margin-bottom:20px;
  border-bottom:1px solid var(--c-line); padding-bottom:14px; }
.cat__count{ font-size:var(--t-meta); color:var(--c-ink-muted); }
.cat__clear{ font:inherit; font-size:var(--t-meta); color:var(--c-ink);
  background:none; border:0; border-bottom:1px solid var(--c-ink);
  border-radius:0; padding:0 0 2px; cursor:pointer; }

.cat__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:38px var(--gut);
  max-height:64vh; overflow-y:auto; overscroll-behavior:contain; }
/* ⚠ The background is LOAD-BEARING, not decoration. craft.css gives the photo
   `mix-blend-mode:multiply` so the shot's white studio sweep dissolves into the
   page — CONCEPT.md's "יתמזגו ברקע העמוד ולא ייראו מודבקים". But `.cat__p` also
   carries `content-visibility:auto` (craft.css), whose implied paint
   containment makes the card a STACKING CONTEXT — so multiply blended against
   the card's own transparent backdrop and did nothing. Measured: the photo
   corner rendered #ffffff at 100% against a #f0f5f0 ground, i.e. exactly the
   pasted-on white rectangle the concept forbids. Giving the card an opaque
   ground restores the blend AND keeps the containment's render budget.
   Verified: #ffffff 100% → #f0f5f0 97% on the same element rect. */
.cat__p{ display:block; background:var(--c-ground); }
.cat__ph{ background:var(--c-ground-sunk); aspect-ratio:3/4; overflow:hidden; }
/* ⚠ NOT --c-paper-deep, and the reason is worth keeping. BRAND-DIRECTION §3.5
   derives L* 80 as the grade target for the photography and notes that at the
   paper's own L* 73 the page mean falls under the floor — so the obvious move
   is to set the tile to --c-paper-deep and let the multiply do it. Tried, and
   it is wrong twice over: (1) the blend resolves against .cat__p's stacking
   context, so the background here changes nothing at all and the tile stayed
   at L* 96 — measured #ffffff at three sample points after the change; and
   (2) forcing it to resolve here darkens the METAL by the same factor, and the
   metal has a grade target of its own (L* 64.6 ± 4 · C 24.1 ± 4 · h 58.5 ± 6,
   from 16,418 sampled pixels of Magnolia's own photography). §6.4 already says
   which one this is: "זו תלות בפרודקשן של הצילום" — the paper is graded by the
   retoucher, and --c-paper-deep is the spec they receive. It is not a CSS
   filter, and pretending otherwise trades a measured metal for a measured
   paper. */
.cat__ph img{ width:100%; height:100%; object-fit:cover; }
/* The catalogue sheen lives in craft.css (.lit / .cat__ph::after) — one
   material, one lamp. It is NOT duplicated here. */

/* Two lines are RESERVED whether or not the name needs them. Product names run
   from "שרשרת תליון" to 84 characters, so a free-flowing name pushed the price
   and the add-to-cart of every second card down by a measured 19px, and by 38px
   on a three-line name — a ragged row in the single most-repeated component on
   the site. The row is the merchandising surface; it has to sit on one line. */
.cat__n{ display:block; margin-top:12px; font-size:var(--t-meta); line-height:1.45;
  min-height:2.9em; display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
/* flex, because `margin-inline-start` on the struck price resolved against the
   price span's OWN `direction:ltr` and therefore put the 8px on its far side.
   Measured gap between "₪79.50" and "₪159": 0.00px — the two numbers touched on
   every card on every grid on the site. A gap on the row is direction-proof. */
.cat__pr{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin-top:5px; font-size:var(--t-body);
  font-variation-settings:'wght' 600; font-weight:var(--w-strong); }
/* A struck list price next to a sale price — the only place two prices ever
   appear together, and never in red. Red is the signal of a discount site and
   it is retired from this system. */
.cat__was{ font-size:var(--t-meta); color:var(--c-ink-muted); font-weight:var(--w-body);
  font-variation-settings:'wght' 400; text-decoration:line-through; }
.cat__p:hover .cat__n{ color:var(--c-ink-muted); }

/* ── 7 · קולקציות ─────────────────────────────────────────────────────── */
.coll__list{ display:flex; flex-wrap:wrap; gap:0 46px; border-top:1px solid var(--c-line);
  padding-top:26px; }
.coll__list a{ font-size:var(--t-sub); font-weight:var(--w-strong);
  font-variation-settings:'wght' 600; }
.coll__list a:hover{ color:var(--c-ink-muted); }

/* ── 8 · הרשת ────────────────────────────────────────────────────────── */
.net__lede{ font-size:var(--t-lead); line-height:var(--lh-lead); font-weight:var(--w-light);
  font-variation-settings:'wght' 300; margin:0 0 44px; max-width:34ch; }
.net__lede strong{ font-weight:var(--w-strong); font-variation-settings:'wght' 600; }
.net__find{ display:flex; align-items:baseline; gap:18px; margin-bottom:20px; }
.net__q{
  flex:1 1 auto; max-width:420px;
  font:inherit; font-size:var(--t-body); color:var(--c-ink);
  background:transparent; border:0; border-bottom:1px solid var(--c-ink);
  border-radius:0;                 /* the system is 100% square corners */
  padding:10px 0; appearance:none;
}
/* placeholder text is text: 2.35:1 fails 1.4.3 exactly the way body copy would */
.net__q::placeholder{ color:var(--c-ink-muted); }
.net__q:focus{ outline:0; border-bottom-width:2px; }
.net__count{ font-size:var(--t-meta); color:var(--c-ink-muted); white-space:nowrap; }
/* Bounded, and it scrolls inside itself — the section keeps its 1.0vh. */
.net__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 var(--gut);
  border-top:1px solid var(--c-line);
  max-height:46vh; overflow-y:auto; overscroll-behavior:contain; }
.net__b{ padding:18px 0; border-bottom:1px solid var(--c-line); }
.net__name{ display:block; font-weight:var(--w-strong); font-variation-settings:'wght' 600; }
.net__addr,.net__tel{ display:block; font-size:var(--t-meta); color:var(--c-ink-muted); margin-top:4px; }
.net__note{ margin-top:26px; font-size:var(--t-meta); color:var(--c-ink-muted); }

/* ── 9 · NV CLUB ─────────────────────────────────────────────────────── */
.club__lede{ font-size:var(--t-lead); line-height:var(--lh-lead); font-weight:var(--w-light);
  font-variation-settings:'wght' 300; margin:0 0 36px; }
.club__contact{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gut);
  border-top:1px solid var(--c-line); padding-top:22px; }
.club__label{ display:block; font-size:var(--t-meta); color:var(--c-ink-muted); margin-bottom:6px; }
.club__contact a{ font-size:var(--t-sub); font-weight:var(--w-strong);
  font-variation-settings:'wght' 600; }
.club__contact a:hover{ color:var(--c-ink-muted); }

/* ── 10 · פוטר — the one dark surface in the system ──────────────────── */
.foot{ background:var(--c-ink-deep); color:var(--c-ground); padding:80px var(--rail) 44px; }
.foot__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gut); }
.foot__h{ font-size:var(--t-meta); font-weight:var(--w-strong); font-variation-settings:'wght' 600;
  margin:0 0 16px; color:var(--c-ink-on-deep); }   /* on --c-ink-deep = 5.88:1 */
.foot__col li{ margin-bottom:9px; }
.foot__col a:hover{ color:var(--c-ink-on-deep); }
.foot__legal{ margin:56px 0 0; font-size:var(--t-meta); color:var(--c-ink-on-deep); }

/* ── mobile: verified at 375px as each section is built, never at the end */
@media (max-width:900px){
  :root{ --rail:20px; }
  .nav__links{ display:none; }
  .hero__band{ height:210px; }
  .hero__glyph{ top:170px; }
  /* The strand hangs down the right on a phone, straight through the caption:
     at 390px it crossed the section title AND every line of the paragraph.
     Measured 13.8.2026. Note the pixel count was only 0.97% — a one-pixel
     strand crossing every line is visually destructive and numerically almost
     nothing, so neither the craft gate nor a naive pixel percentage can catch
     this. The clearance is a real cost: it takes the measure down to ~26
     characters, under the 35–90 the type brief asks for. Two lines of note
     text can carry that; a paragraph could not. Interim, from the CSS side —
     the strand's own scale on a narrow viewport belongs to the scene. */
  .hero__cap{ top:auto; margin-top:0; width:auto; inset-inline:20px; top:430px;
    padding-inline-start:96px; }
  section{ padding:70px var(--rail); }
  .alef__list{ grid-template-columns:1fr 1fr; }
  .pers__rig{ grid-template-columns:1fr; gap:38px; }
  .pers__stage{ min-height:150px; }
  /* The rail goes horizontal on a phone. It is a genuine RTL trap: a
     horizontal scroller inside dir="rtl" double-flips its transform, so the
     scroller runs ltr and only its contents stay rtl. */
  .cat__rig{ grid-template-columns:1fr; gap:18px; }
  .cat__rail{ position:static; flex-direction:row; direction:ltr;
    max-height:none; gap:0 10px; padding-bottom:8px; }
  .cat__l{ font-size:22px; flex:0 0 auto; }
  .cat__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 16px; max-height:none; }
  .coll__list{ gap:0 26px; }
  .net__grid{ grid-template-columns:1fr; }
  .club__contact{ grid-template-columns:1fr; gap:20px; }
  .foot__cols{ grid-template-columns:1fr 1fr; gap:32px var(--gut); }
  .hush{ height:45vh; }
}

/* ── reduced motion: ARCHITECTURE, not a switch ──────────────────────────
   The blanket `*{animation-duration:.001ms!important}` that used to live here
   is a per-component audit waiting to happen, and it produces an interface
   that TELEPORTS. Stripe's move is better and it is one block: null the
   duration TOKENS. Every transition still exists, with its easing, its
   choreography and its delays — only time goes to zero. And `reduce` means
   fewer and gentler, not none: opacity, colour and focus rings all survive,
   position change does not. The still version of this page is designed in
   craft.css, it is not switched off. */
@media (prefers-reduced-motion:reduce){
  :root{
    --d-answer:0ms; --d-settle:0ms; --d-tap:0ms; --d-ui:0ms;
    --d-reveal:0ms; --d-cross:0ms; --stagger:0ms;
  }
}