/* ============================================================
   fonts-page.css · עמוד הפונטים (fonts.html)
   נשען על dy.css (טוקנים, כפתורים, panel, chip, nextp).
   הפונטים עצמם נטענים מ-js/fonts-page.js עם FontFace (display: swap),
   כל פונט רק כשהסקשן שלו מתקרב למסך. עד אז הכל נופל ל-Daniel Letters.
   ============================================================ */

.fx { --fx-ease: var(--ease); padding-top: calc(var(--nav-h) + 34px); }

/* משפחות לכל סקשן. --ff מוחלף ע"י בורר הסגנון. */
.fxs--dl      { --ff: 'Daniel Letters', var(--f-brand); --fw: 400; --fst: normal; }
.fxs--abudi   { --ff: 'FS Abudi', var(--f-brand); --fw: 400; --fst: normal; }
.fxs--kishuf  { --ff: 'FS Kishuf', var(--f-brand); --fw: 400; --fst: normal; }
.fxs--space   { --ff: 'FS Space', var(--f-brand); --fw: 400; --fst: normal; }
.fxs--hp      { --ff: 'FS HP', var(--f-brand); --fw: 400; --fst: normal; }
.fxs--marauder{ --ff: 'FS Marauder', var(--f-brand); --fw: 400; --fst: normal; }
.fxs--yeladim { --ff: 'FS Yeladim', var(--f-brand); --fw: 400; --fst: normal; }

/* ---------- הירו ---------- */
.fx-hero { display: grid; justify-items: center; text-align: center; gap: 18px; padding-block: clamp(20px, 4vw, 56px) clamp(56px, 8vw, 110px); }
.fx-hero .lead { margin-inline: auto; max-width: 56ch; }
.fx-hero__title { margin: 0; line-height: 1; }
/* תיבה קבועה: שתי שורות בגובה קבוע, כדי שהחלפת הפונט לא תזיז את הדף */
.fx-word {
  display: grid; grid-template-rows: 1.12em 1.12em; justify-items: center; align-items: center;
  font-size: clamp(3.6rem, 1.2rem + 11vw, 10.5rem); line-height: 1; height: 2.3em; width: 100%; contain: layout;
}
.fx-w { display: inline-flex; align-items: baseline; white-space: nowrap; height: 1.12em; max-width: 100%; }
.fx-l {
  display: inline-block; font-family: 'Daniel Letters', var(--f-brand); font-weight: 900; color: var(--text);
  -webkit-text-stroke: .045em var(--ink); paint-order: stroke fill; text-shadow: .045em .055em 0 var(--ink);
  transform-origin: 50% 85%; will-change: transform; padding-inline: .015em;
}
.fx-l.f-abudi  { font-family: 'FS Hero Abudi', var(--f-brand); font-weight: 400; color: #b8f0c8; }
.fx-l.f-kishuf { font-family: 'FS Hero Kishuf', var(--f-brand); font-weight: 400; color: var(--gold); }
.fx-l.f-hp     { font-family: 'FS Hero HP', var(--f-brand); font-weight: 400; color: #f3c46b; }
.fx-l.f-marauder { font-family: 'FS Hero Marauder', var(--f-brand); font-weight: 400; color: #f1e2c0; }
.fx-l.f-yeladim { font-size: .72em; padding-inline: .035em; font-family: 'FS Hero Yeladim', var(--f-brand); font-weight: 400; -webkit-text-stroke: 0; text-shadow: none; filter: drop-shadow(.03em .05em 0 var(--ink)); }
.fx-l.f-space  { font-family: 'FS Hero Space', var(--f-brand); font-weight: 400; -webkit-text-stroke: 0; text-shadow: none; filter: drop-shadow(.03em .05em 0 var(--ink)); }
.fx-hero__now {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 16px 6px 14px; border-radius: var(--r-pill);
  font: 700 1rem/1.2 var(--f-brand); color: var(--muted); background: rgba(255,255,255,.06); border: 1px solid var(--line);
}
.fx-hero__now b { color: var(--gold); font-weight: 900; display: inline-block; }
.fx-hero__now i { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(245,200,66,.18); }
.js-motion .fx-hero__now i { animation: fx-blink 1.6s var(--ease-in-out) infinite; }
@keyframes fx-blink { 50% { transform: scale(.6); opacity: .5; } }

/* כרטיסי הפונטים: מפת העמוד. גריד שנשבר לשורות, לא גלילה הצידה */
.fx-index { width: 100%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(10px, 2vw, 20px); margin-top: clamp(18px, 3vw, 36px); }
.fx-card {
  position: relative; display: grid; gap: 4px; justify-items: center; padding: 18px 12px 16px; border-radius: var(--r-lg);
  background: var(--night-2); border: var(--stroke) solid var(--ink); box-shadow: var(--hard), var(--rim); overflow: hidden;
  transition: transform .5s var(--spring), box-shadow .3s var(--ease);
}
.fx-card:hover, .fx-card:focus-visible { transform: translate(-3px, -5px) rotate(-1deg); box-shadow: 9px 11px 0 var(--ink), var(--rim); }
.fx-card:nth-child(even):hover { transform: translate(-3px, -5px) rotate(1deg); }
.fx-card { container-type: inline-size; }
.fx-card__sample { font-size: min(clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem), 30cqi); white-space: nowrap; line-height: 1.25; transition: transform .6s var(--spring); }
.fx-card:hover .fx-card__sample { transform: scale(1.08) rotate(-3deg); }
.fx-card b { font: 900 clamp(1rem, .85rem + .6vw, 1.2rem)/1.1 var(--f-brand); white-space: nowrap; }
.fx-card small { font: 700 .9rem/1.2 var(--f-brand); color: var(--muted); }
.fx-card--dl .fx-card__sample { font-family: 'Daniel Letters', var(--f-brand); font-weight: 900; color: var(--text); }
.fx-card--abudi { background: var(--paper); color: var(--paper-ink); }
.fx-card--abudi small { color: #4b6b58; }
.fx-card--abudi .fx-card__sample { font-family: 'FS Hero Abudi', var(--f-brand); color: #1d5a3a; }
.fx-card--kishuf { background: linear-gradient(160deg, #3a1d63, #1a0f3a); }
.fx-card--kishuf .fx-card__sample { font-family: 'FS Hero Kishuf', var(--f-brand); color: var(--gold); text-shadow: 0 0 18px rgba(245,200,66,.35); }
.fx-card--space { background: radial-gradient(120% 90% at 30% 10%, #23306e, #090c26 70%); }
.fx-card--space .fx-card__sample { font-family: 'FS Hero Space', var(--f-brand); color: var(--gold); }
.fx-card--marauder { background: linear-gradient(160deg, #e9d6ad, #c9a46a); color: #3a2414; }
.fx-card--marauder small { color: #6b4a2a; }
.fx-card--marauder .fx-card__sample { font-family: 'FS Hero Marauder', var(--f-brand); color: #3a2414; }
.fx-card--hp { background: radial-gradient(120% 90% at 50% 0%, #4b2a12, #170c08 75%); }
.fx-card--hp .fx-card__sample { font-family: 'FS Hero HP', var(--f-brand); color: #f3c46b; text-shadow: 0 0 14px rgba(243,196,107,.35); }
.fx-card--yeladim { background: linear-gradient(160deg, #ff5fa2, #ffb02e); color: var(--ink); }
.fx-card--yeladim small { color: #3a1240; }
.fx-card--yeladim .fx-card__sample { font-family: 'FS Hero Yeladim', var(--f-brand); }
.js-motion .fx-index .fx-card { animation: deal .7s var(--spring) backwards; animation-delay: calc(.35s + var(--i, 0) * 80ms); }

/* ---------- סקשן פונט ---------- */
.fxs { position: relative; padding-block: clamp(26px, 4vw, 52px); scroll-margin-top: calc(var(--nav-h) + 20px); }
.fxs__panel {
  --pad: clamp(18px, 4vw, 56px);
  position: relative; display: grid; gap: clamp(28px, 4vw, 52px); padding: var(--pad);
  border-radius: var(--r-lg); border: var(--stroke) solid var(--ink); box-shadow: var(--hard-lg), var(--rim);
  background: var(--night-2); overflow: hidden; isolation: isolate;
}
.fxs__top { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
.fxs__intro { display: grid; gap: 12px; align-content: start; min-width: 0; }
.fxs__num { font: 900 1rem/1 var(--f-brand); color: var(--accent-fx, var(--gold)); letter-spacing: .08em; }
.fxs__name {
  font-family: var(--ff); font-weight: var(--fw); font-style: var(--fst);
  font-size: min(clamp(3rem, 1.6rem + 6vw, 6.6rem), 13.5cqi); line-height: 1.1; overflow-wrap: normal; word-break: keep-all; text-wrap: balance;
}
.fxs__intro { container-type: inline-size; }
.fxs__latin { font: 700 1.05rem/1.2 var(--f-text); color: var(--muted); letter-spacing: .04em; }
.fxs__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 4px 6px; }
.fxs__story { display: grid; gap: 12px; max-width: 60ch; color: var(--muted); font-size: var(--fs-body); line-height: 1.75; }
.fxs__story p:first-child { color: var(--text); }
.fxs__aside { font: 900 clamp(1.25rem, 1rem + .9vw, 1.6rem)/1.3 var(--f-brand); color: var(--accent-fx, var(--gold)) !important; }
.fxs__media { margin: 0; display: grid; gap: 8px; min-width: 0; }
.fxs__media img { width: 100%; height: auto; border-radius: var(--r); border: var(--stroke) solid var(--ink); box-shadow: var(--hard); background: #fff; }
.fxs__media figcaption { font: 700 .92rem/1.35 var(--f-brand); color: var(--muted); }
.fxs__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.fxs__duo .fxs__media:nth-child(1) { transform: rotate(1.6deg); }
.fxs__duo .fxs__media:nth-child(2) { transform: rotate(-1.4deg) translateY(18px); }

.fxs__block { display: grid; gap: 14px; }
.fxs__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font: 900 var(--fs-h3)/1.15 var(--f-brand); }
.fxs__h small { font: 700 .9rem/1.3 var(--f-brand); color: var(--muted); }

/* האלפבית: אריחים שנשברים לשורות */
.fx-alpha { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(54px, 13vw, 84px), 1fr)); gap: clamp(6px, 1vw, 10px); }
.fx-tile {
  position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 14px;
  font-family: var(--ff); font-weight: var(--fw); font-style: var(--fst); font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); line-height: 1;
  color: var(--tile-fg, var(--text)); background: var(--tile-bg, rgba(255,255,255,.05)); border: 2px solid var(--tile-line, rgba(255,255,255,.12));
  transition: transform .45s var(--spring), background .2s, border-color .2s, box-shadow .25s var(--ease);
}
.fx-tile:hover, .fx-tile:focus-visible { transform: translateY(-4px) scale(1.12) rotate(-4deg); z-index: 2; border-color: var(--ink); background: var(--tile-hi, var(--gold)); color: var(--tile-hi-fg, var(--ink)); box-shadow: 4px 5px 0 var(--ink); }
.fx-tile:active { transform: scale(.94); }
.fx-alpha--digits { display: flex; flex-wrap: wrap; gap: clamp(6px, 1vw, 10px); }
.fx-tile--digit { width: clamp(44px, 10vw, 62px); font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); --tile-bg: transparent; }
.fx-tile.is-hit { animation: fx-hit .55s var(--spring); }
@keyframes fx-hit { 30% { transform: scale(.82, 1.12); } }
/* כניסה של האריחים כשהפונט נטען: קפיצה מדורגת */
.js-motion .fxs .fx-tile { opacity: 0; transform: translateY(16px) scale(.6) rotate(8deg); }
.js-motion .fxs.is-ready .fx-tile { opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .7s var(--spring), background .2s, border-color .2s, box-shadow .25s var(--ease); transition-delay: calc(var(--i, 0) * 18ms), calc(var(--i, 0) * 18ms), 0s, 0s, 0s; }
.js-motion .fxs.is-ready .fx-tile:hover, .js-motion .fxs.is-ready .fx-tile:focus-visible { transform: translateY(-4px) scale(1.12) rotate(-4deg); transition-delay: 0s; }

/* מפל המשקלים */
.fx-fall { display: grid; gap: 2px; }
.fx-fall li { display: grid; grid-template-columns: minmax(78px, 112px) 1fr; align-items: baseline; gap: 12px; padding-block: 4px; border-bottom: 1px solid var(--line); }
.fx-fall small { font: 500 .82rem/1 var(--f-text); color: var(--muted); direction: ltr; text-align: end; }
.fx-fall span { font-family: 'Daniel Letters', var(--f-brand); font-weight: var(--w); font-size: clamp(1.5rem, 1rem + 2.4vw, 2.8rem); line-height: 1.25; overflow-wrap: anywhere; min-width: 0; }
.js-motion .fxs .fx-fall li { opacity: 0; transform: translateX(-30px); }
.js-motion .fxs.is-ready .fx-fall li { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .8s var(--spring); transition-delay: calc(var(--w) * .7ms); }

/* בוחן הקלדה */
.fx-tester {
  display: grid; gap: 14px; padding: clamp(14px, 2.6vw, 26px); border-radius: var(--r-lg);
  background: var(--tester-bg, rgba(4, 6, 26, .5)); border: var(--stroke) solid var(--ink); box-shadow: var(--hard);
}
.fx-tester__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.fx-size { display: inline-flex; align-items: center; gap: 10px; font: 700 .95rem/1 var(--f-brand); color: var(--muted); }
.fx-size input { width: clamp(130px, 30vw, 240px); accent-color: var(--gold); height: 28px; cursor: pointer; }
.fx-size output { min-width: 3ch; font: 900 1rem/1 var(--f-brand); color: var(--text); text-align: center; }
.fx-styles { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-styles:empty { display: none; }
.fx-style {
  min-height: 40px; padding: 6px 14px; border-radius: var(--r-pill); font: 700 .95rem/1 var(--f-brand);
  background: rgba(255,255,255,.07); color: var(--text); border: 2px solid rgba(255,255,255,.18);
  transition: transform .4s var(--spring), background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.fx-style:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.5); }
.fx-style[aria-pressed="true"] { background: var(--gold); color: var(--ink); border-color: var(--ink); box-shadow: 2px 3px 0 var(--ink); }
.fx-style.is-loading { position: relative; color: transparent; }
.fx-style.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--ink); border-top-color: transparent; animation: fx-spin .7s linear infinite; }
@keyframes fx-spin { to { transform: rotate(1turn); } }
.fx-tester__input {
  --size: 64px;
  display: block; width: 100%; min-height: calc(var(--size) * 1.6); resize: vertical; field-sizing: content; max-height: 70vh;
  margin: 0; padding: .1em .25em; border-radius: var(--r); border: 2px dashed rgba(255,255,255,.22); background: transparent; color: var(--tester-fg, var(--text));
  font-family: var(--ff); font-weight: var(--fw); font-style: var(--fst); font-size: var(--size); line-height: 1.35;
  transition: border-color .2s; caret-color: var(--gold); overflow-wrap: anywhere;
}
.fx-tester__input:focus { outline: none; border-color: var(--gold); border-style: solid; }
.fx-tester__input::placeholder { color: rgba(255,255,255,.3); }
.fx-tester__note { font-size: var(--fs-small); color: var(--muted); }

/* לפני שהפונט נטען: הטקסט שקוף-חלקית ומטושטש, לא קופץ */
.fxs:not(.is-ready) .fxs__name, .fxs:not(.is-ready) .fx-tester__input, .fxs:not(.is-ready) .fx-spell { opacity: .35; filter: blur(3px); }
.fxs .fxs__name, .fxs .fx-tester__input, .fxs .fx-spell { transition: opacity .6s var(--ease), filter .6s var(--ease), border-color .2s; }

/* ---------- זהות לכל פונט ---------- */
/* 01 · האותיות של דניאל: לילה וזהב, טוש על דיו */
.fxs--dl .fxs__panel { background:
  radial-gradient(70% 60% at 100% 0%, rgba(245,200,66,.14), transparent 60%),
  radial-gradient(60% 50% at 0% 100%, rgba(67,175,191,.12), transparent 60%), var(--night-2); }
.fxs--dl .fxs__media--sheet img { background: #fff; padding: 4%; }

/* 02 · עבודי: מחברת עם שורות, דיו ירוק */
.fxs--abudi { --accent-fx: #1d5a3a; }
.fxs--abudi .fxs__panel {
  color: var(--paper-ink); background-color: var(--paper);
  background-image: linear-gradient(90deg, transparent calc(100% - var(--margin, 46px)), rgba(200,60,60,.35) calc(100% - var(--margin, 46px)), rgba(200,60,60,.35) calc(100% - var(--margin, 46px) + 2px), transparent calc(100% - var(--margin, 46px) + 2px)),
    repeating-linear-gradient(180deg, transparent 0 39px, rgba(29,90,58,.13) 39px 40px);
}
.fxs--abudi .fxs__name { color: #1d5a3a; }
.fxs--abudi .fxs__latin, .fxs--abudi .fxs__story, .fxs--abudi .fxs__media figcaption, .fxs--abudi .fxs__h small, .fxs--abudi .fx-tester__note { color: #57506f; }
.fxs--abudi .fxs__story p:first-child { color: var(--paper-ink); }
.fxs--abudi .chip { background: rgba(28,23,64,.06); color: var(--paper-ink); border-color: rgba(28,23,64,.18); }
.fxs--abudi .chip--gold { background: var(--gold); border-color: var(--ink); }
.fxs--abudi .fx-tile { --tile-fg: #1d5a3a; --tile-bg: rgba(255,255,255,.55); --tile-line: rgba(28,23,64,.14); }
.fxs--abudi .fx-tester { --tester-bg: #fffaf0; --tester-fg: #1d5a3a; }
.fxs--abudi .fx-tester__input { border-color: rgba(28,23,64,.2); }
.fxs--abudi .fx-tester__input::placeholder { color: rgba(28,23,64,.3); }
.fxs--abudi .fx-size { color: #57506f; }
.fxs--abudi .fx-size output { color: var(--paper-ink); }
.fxs--abudi .fx-style { background: rgba(28,23,64,.05); color: var(--paper-ink); border-color: rgba(28,23,64,.18); }
.fxs--abudi .fx-style[aria-pressed="true"] { background: #1d5a3a; color: #fff; border-color: var(--ink); }
.fxs--abudi .fx-tester__input, .fxs--abudi .fx-tile { font-feature-settings: "dlig" 1; }
.fxs--abudi .fxs__media img { background: var(--paper-2); }

/* 03 · כישוף: סגול עמוק, זהב זוהר */
.fxs--kishuf { --accent-fx: var(--gold); }
.fxs--kishuf .fxs__panel { background:
  radial-gradient(55% 45% at 15% 20%, rgba(245,200,66,.16), transparent 65%),
  radial-gradient(60% 60% at 90% 90%, rgba(129,80,194,.45), transparent 65%), linear-gradient(160deg, #2b1552, #140a30 70%); }
.fxs--kishuf .fxs__name, .fxs--kishuf .fx-tester__input { color: var(--gold-hi); text-shadow: 0 0 .35em rgba(245,200,66,.35); }
.fxs--kishuf .fx-tile { --tile-fg: var(--gold-hi); --tile-bg: rgba(20,8,48,.55); --tile-line: rgba(245,200,66,.2); }
.fxs__top--solo { grid-template-columns: 1fr; }
.fx-spell { display: grid; place-items: center; min-height: 220px; font-family: var(--ff); font-weight: var(--fw); font-size: clamp(5rem, 3rem + 9vw, 11rem); line-height: 1.3; color: var(--gold-hi); text-shadow: 0 0 .25em rgba(245,200,66,.45), .04em .05em 0 var(--ink); }
.fx-spell__w, .fx-float-word { display: inline-flex; direction: rtl; }
.fl { display: inline-block; transform-origin: 50% 70%; }
/* כל אות מרחפת לבד: קצב, גובה והטיה משלה, עם נשימת זוהר */
@media (prefers-reduced-motion: no-preference) {
  html.js-motion:not(.reduce-motion) .fx-spell .fl, html.js-motion:not(.reduce-motion) .fx-float-word .fl { animation: fx-letter var(--t, 5s) cubic-bezier(.45, 0, .55, 1) var(--dl, 0s) infinite; }
  html.js-motion:not(.reduce-motion) .fx-spell .fl { animation-name: fx-letter, fx-glow; animation-duration: var(--t, 5s), calc(var(--t, 5s) * 1.3); }
}
@keyframes fx-letter {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(calc(var(--a, .1em) * -1)) rotate(var(--r, 3deg)); }
  65% { transform: translateY(calc(var(--a, .1em) * .45)) rotate(calc(var(--r, 3deg) * -.6)); }
}
@keyframes fx-glow { 0%, 100% { text-shadow: 0 0 .25em rgba(245,200,66,.45), .04em .05em 0 var(--ink); } 50% { text-shadow: 0 0 .5em rgba(245,200,66,.8), .04em .05em 0 var(--ink); } }
@keyframes fx-float { 50% { transform: translateY(-.06em) rotate(-1.5deg); } }

/* 04 · ספייס: חלל עם כוכבים */
.fxs--space .fxs__panel { background:
  radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 32% 72%, #fff, transparent),
  radial-gradient(1.5px 1.5px at 58% 12%, #ffe9a8, transparent), radial-gradient(1px 1px at 76% 46%, #fff, transparent),
  radial-gradient(1.5px 1.5px at 88% 82%, #fff, transparent), radial-gradient(1px 1px at 22% 92%, #cfe3ff, transparent),
  radial-gradient(1px 1px at 46% 38%, #fff, transparent), radial-gradient(1.5px 1.5px at 94% 22%, #fff, transparent),
  radial-gradient(70% 60% at 80% 10%, rgba(129,80,194,.35), transparent 65%),
  radial-gradient(60% 50% at 10% 90%, rgba(46,99,201,.35), transparent 65%), linear-gradient(180deg, #0f1440, #070923); }
.fxs--space .fx-tile { --tile-bg: rgba(255,255,255,.04); --tile-line: rgba(255,224,138,.16); --tile-hi: rgba(255,224,138,.16); }
.fxs--space .fxs__media--cover img { max-width: 440px; margin-inline: auto; }
.fxs--space .fxs__media--cover { justify-items: center; }

/* ממתינים לאישור */
.fxs--hp .fxs__panel, .fxs--marauder .fxs__panel { background: linear-gradient(160deg, #2a1f14, #120d08); }
.fxs--yeladim .fxs__panel { background: linear-gradient(160deg, #0f3d6b, #071a33); }

/* ---------- פריסה ---------- */
@media (min-width: 900px) {
  .fxs__top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .fxs__top--solo { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}
@media (max-width: 760px) {
  .fx-index { grid-template-columns: 1fr 1fr; } .fx-index .fx-card:last-child { grid-column: 1 / -1; }
  .fx-fall li { grid-template-columns: 1fr; gap: 0; }
  .fx-fall small { text-align: start; direction: rtl; }
  .fxs__duo .fxs__media:nth-child(2) { transform: rotate(-1.4deg) translateY(10px); }
  .fx-tester__bar { flex-direction: column; align-items: stretch; }
  .fxs--abudi .fxs__panel { --margin: 8px; }
  .fx-size input { flex: 1; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-l, .fx-card, .fx-tile, .fx-style { transition: none !important; animation: none !important; }
}

/* 05 · הקונדסאים: קלף ישן ודיו */
.fxs--marauder { --accent-fx: #7a4a22; }
.fxs--marauder .fxs__panel { background: radial-gradient(70% 60% at 85% 10%, rgba(255,255,255,.35), transparent 60%), radial-gradient(80% 70% at 10% 100%, rgba(122,74,34,.28), transparent 65%), linear-gradient(170deg, #efe0bd, #d8bd8a); color: #3a2414; }
.fxs--marauder .fxs__name, .fxs--marauder .fx-tester__input { color: #3a2414; }
.fxs--marauder .fxs__latin, .fxs--marauder .fxs__story, .fxs--marauder figcaption, .fxs--marauder .fxs__h small, .fxs--marauder .fx-tester__note, .fxs--marauder .fx-size { color: #6b4a2a; }
.fxs--marauder .fxs__num { color: rgba(58,36,20,.25); }
.fxs--marauder .chip { background: rgba(58,36,20,.08); color: #3a2414; border-color: rgba(58,36,20,.25); }
.fxs--marauder .chip--gold { background: var(--gold); border-color: var(--ink); }
.fxs--marauder .fx-tile { --tile-fg: #3a2414; --tile-bg: rgba(255,250,235,.55); --tile-line: rgba(58,36,20,.2); }
.fxs--marauder .fx-tester { --tester-bg: #fbf3df; --tester-fg: #3a2414; }
.fxs--marauder .fx-style { background: rgba(58,36,20,.06); color: #3a2414; border-color: rgba(58,36,20,.25); }
.fxs--marauder .fx-style[aria-pressed="true"] { background: #3a2414; color: #f1e2c0; border-color: var(--ink); }

/* 06 · הארי פוטר עברית: לילה בטירה, זהב חם */
.fxs--hp { --accent-fx: #f3c46b; }
.fxs--hp .fxs__panel { background: radial-gradient(60% 50% at 15% 15%, rgba(243,196,107,.18), transparent 65%), radial-gradient(70% 60% at 90% 90%, rgba(126,40,20,.45), transparent 65%), linear-gradient(170deg, #26150c, #0d0705 75%); }
.fxs--hp .fxs__name, .fxs--hp .fx-tester__input { color: #f3c46b; text-shadow: 0 0 .3em rgba(243,196,107,.3); }
.fxs--hp .fx-tile { --tile-fg: #f3c46b; --tile-bg: rgba(255,255,255,.04); --tile-line: rgba(243,196,107,.18); }

/* 07 · ילדים בלוק: צבעוני ושמח */
.fxs--yeladim { --accent-fx: #ff5fa2; }
.fxs--yeladim .fxs__panel { background: radial-gradient(50% 60% at 90% 10%, rgba(255,176,46,.5), transparent 65%), radial-gradient(60% 60% at 5% 95%, rgba(46,180,255,.4), transparent 65%), linear-gradient(160deg, #ff5fa2, #8f3dff 70%); }
.fxs--yeladim .fxs__latin, .fxs--yeladim .fxs__story, .fxs--yeladim .fx-tester__note, .fxs--yeladim .fxs__h small { color: #fff3fb; }
.fxs--yeladim .fx-tile { --tile-fg: #fff; --tile-bg: rgba(255,255,255,.14); --tile-line: rgba(255,255,255,.3); }
.fxs--yeladim .fx-tester { --tester-bg: #fffaf0; --tester-fg: var(--ink); }

/* תיקונים אחרי הוספת שלושת הפונטים */
.fx-card b { white-space: normal; font-size: min(1.1rem, 11.5cqi); line-height: 1.15; text-align: center; text-wrap: balance; }
.fx-card small { font-size: min(.82rem, 9cqi); text-align: center; text-wrap: balance; }
.fxs--marauder .fxs__name { line-height: 1.4; }
.fxs--marauder .fxs__story p { color: #4a3220; }
.fxs--marauder .fxs__media img { max-width: 420px; margin-inline: auto; }
.fxs--hp .fxs__name { line-height: 1.3; }

/* צל שחור לספייס (בקובץ הפונט הצל אפור, צבע 0 בפלטה) */
@font-palette-values --space-ink { font-family: 'FS Space', 'FS Space Rough', 'FS Hero Space'; override-colors: 0 #0b0a1a; }
.fxs--space, .fx-l.f-space, .fx-card--space .fx-card__sample { font-palette: --space-ink; }

/* 07 · ילדים בלוק בשפה של ערוץ הילדים: כתום עם ספירלה, פס סרט צבעוני בצדדים, לבן עם קו מתאר שחור וסגול */
.fxs--yeladim { --accent-fx: #7a3fc4; --yb-or: #f07a1a; --yb-or2: #e85f0c; --yb-pu: #6b3ab8; --yb-gr: #5cc21f; }
.fxs--yeladim .fxs__panel {
  position: relative; isolation: isolate; overflow: hidden; padding-inline: clamp(46px, 6vw, 84px);
  background:
    repeating-radial-gradient(circle at 50% 42%, var(--yb-or) 0 34px, var(--yb-or2) 34px 68px);
  border: 4px solid #000;
}
/* פס הסרט: ריבועים ירוק / סגול / שחור / לבן בשני הצדדים */
.fxs--yeladim .fxs__panel::before, .fxs--yeladim .fxs__panel::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(30px, 3.6vw, 48px); z-index: -1;
  background:
    repeating-linear-gradient(180deg, var(--yb-gr) 0 22px, #000 22px 28px, #ffa21f 28px 50px, #000 50px 56px, var(--yb-pu) 56px 78px, #000 78px 84px);
  border-inline: 4px solid #000;
}
.fxs--yeladim .fxs__panel::before { inset-inline-start: 0; }
.fxs--yeladim .fxs__panel::after { inset-inline-end: 0; }
.fxs--yeladim .fxs__name, .fxs--yeladim .fxs__num {
  color: #fff; -webkit-text-stroke: .06em #000; paint-order: stroke fill; text-shadow: .06em .07em 0 #000, .07em .09em 0 #000;
}
.fxs--yeladim .fxs__num { color: var(--yb-gr); }
.fxs--yeladim .fxs__latin { color: #fff; text-shadow: 2px 2px 0 #000; }
.fxs--yeladim .fxs__story { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.6); }
.fxs--yeladim .fxs__story p { background: var(--yb-pu); border: 3px solid #000; border-radius: 22px 22px 22px 6px; padding: 12px 16px; box-shadow: 4px 5px 0 #000; }
.fxs--yeladim .chip { background: #ffa21f; color: #000; border: 3px solid #000; box-shadow: 3px 3px 0 #000; }
.fxs--yeladim .chip--gold { background: var(--yb-gr); color: #000; }
.fxs--yeladim .fxs__h, .fxs--yeladim .fxs__h small, .fxs--yeladim .fx-tester__note, .fxs--yeladim .fx-size { color: #fff; text-shadow: 2px 2px 0 #000; }
.fxs--yeladim .fx-tile { --tile-fg: #fff; --tile-bg: var(--yb-pu); --tile-line: #000; border-width: 3px; box-shadow: 3px 3px 0 #000; }
.fxs--yeladim .fx-tile { -webkit-text-stroke: .04em #000; paint-order: stroke fill; }
.fxs--yeladim .fx-tester { --tester-bg: #fff; --tester-fg: #000; border: 4px solid #000; box-shadow: 6px 7px 0 #000; }
.fxs--yeladim .fx-style { background: var(--yb-gr); color: #000; border: 3px solid #000; }
.fxs--yeladim .fx-style[aria-pressed="true"] { background: var(--yb-pu); color: #fff; }
/* הכרטיס בראש העמוד */
.fx-card--yeladim { background: repeating-radial-gradient(circle at 50% 40%, #f07a1a 0 14px, #e85f0c 14px 28px); color: #fff; border-color: #000; }
.fx-card--yeladim b { color: #fff; -webkit-text-stroke: 3px #000; paint-order: stroke fill; }
.fx-card--yeladim small { color: #fff; text-shadow: 1px 1px 0 #000; }
.fx-card--yeladim .fx-card__sample { color: #fff; -webkit-text-stroke: .05em #000; paint-order: stroke fill; text-shadow: .05em .06em 0 #000; }
/* בתוך הבוחן (רקע לבן): כותרת, גודל וכפתורי הסגנון בשחור וצבעים מלאים */
.fxs--yeladim .fx-tester .fxs__h, .fxs--yeladim .fx-tester .fx-size, .fxs--yeladim .fx-tester .fx-size output { color: #000; text-shadow: none; }
.fxs--yeladim .fx-tester .fx-style { background: var(--yb-gr); color: #000; border: 3px solid #000; box-shadow: 3px 3px 0 #000; opacity: 1; font-weight: 900; }
.fxs--yeladim .fx-tester .fx-style:nth-child(3n+2) { background: #ffa21f; }
.fxs--yeladim .fx-tester .fx-style:nth-child(3n) { background: #b48cff; }
.fxs--yeladim .fx-tester .fx-style[aria-pressed="true"] { background: var(--yb-pu); color: #fff; transform: translateY(-2px); }
/* הבוחן על סגול כהה: הפונט הלבן עם הקו השחור בולט עליו */
.fxs--yeladim .fx-tester { --tester-bg: #4a2390; --tester-fg: #fff; background: #4a2390; }
.fxs--yeladim .fx-tester__input { color: #fff; -webkit-text-stroke: .045em #000; paint-order: stroke fill; border-color: rgba(255,255,255,.35); }
.fxs--yeladim .fx-tester__input::placeholder { color: rgba(255,255,255,.5); -webkit-text-stroke: 0; }
.fxs--yeladim .fx-tester .fxs__h, .fxs--yeladim .fx-tester .fx-size, .fxs--yeladim .fx-tester .fx-size output, .fxs--yeladim .fx-tester__note { color: #fff; text-shadow: 2px 2px 0 #000; }

/* the tester is a rich editor (20.10.2026): select part of the text and give it another style */
.fx-tester__input[contenteditable] { white-space: pre-wrap; cursor: text; overflow-y: auto; resize: none; }
.fx-tester__input[contenteditable]:empty::before { content: attr(data-placeholder); color: rgba(255,255,255,.3); pointer-events: none; }
.fxs--abudi .fx-tester__input[contenteditable]:empty::before { color: rgba(28,23,64,.3); }
.fx-tester__input .fx-mix { font-size: inherit; line-height: inherit; color: inherit; }

/* link to the font's own exhibition page (20.10.2026) */
.fxs__more { justify-self: start; display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; min-height: 50px; padding: 0 22px; border-radius: var(--r-pill);
  background: var(--accent-fx, var(--gold)); color: var(--ink); font: 700 1rem/1 var(--f-text); text-decoration: none; border: 2px solid var(--ink); box-shadow: 3px 4px 0 var(--ink);
  transition: transform .25s var(--spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .25s; }
.fxs__more-arrow { display: inline-block; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.fxs__more:hover, .fxs__more:focus-visible { transform: translateY(-3px); box-shadow: 4px 7px 0 var(--ink); }
.fxs__more:hover .fxs__more-arrow, .fxs__more:focus-visible .fxs__more-arrow { transform: translateX(-6px); }
.fxs--marauder .fxs__more { background: #3a2414; color: #f1e2c0; }
.fxs--abudi .fxs__more { background: #1d5a3a; color: #fff; }
.fxs--hp .fxs__more { background: #f3c46b; }
.fxs--yeladim .fxs__more { background: #ffe14d; }
@media (prefers-reduced-motion: reduce) { .fxs__more, .fxs__more-arrow { transition: none; } }