/* ==========================================================================
   JLI - Kabbalah and the Hidden Architecture of You
   ChabadOne templateless minisite theme

   Design: the v1 treatment - warm paper ground, rounded cards, generous
   spacing, and a layered collage hero whose pieces stagger in - carrying the
   real artwork and display type from the InDesign package.

   Type: ABC Arizona Flare for display, Hayfork JNL for labels, Inter for body.
   Body stays on Inter because the spacing and reading rhythm here were built
   around it; the brand faces do the display work.

   Load order in the Header HTML block is style.css then hero-layers.css.

   Everything is scoped to :is(.noselect, .jli-ms) so ChabadOne's own stylesheets
   (DefaultGrid.css, Elements.css, main.css, global.css) cannot leak in.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap");

/* --------------------------------------------------------------------------
   0. Brand faces

   ABC Arizona Flare (Dinamo) and Hayfork JNL (Jeffrey N. Levine) are
   COMMERCIAL. The files in the InDesign package carry DESKTOP licences only -
   InDesign bundles them for the print vendor. Serving them from a public CDN
   is web distribution and needs a separate WEBFONT licence. See
   fonts/LICENSING.txt.

   Not cleared yet? Delete this whole block. Every rule below falls back to
   Instrument Serif (SIL OFL) and Inter, and the page still reads correctly.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Arizona Flare";
  src: url("fonts/arizona-flare-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arizona Flare";
  src: url("fonts/arizona-flare-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arizona Flare";
  src: url("fonts/arizona-flare-medium-italic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Arizona Flare";
  src: url("fonts/arizona-flare-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hayfork";
  src: url("fonts/hayfork.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* ABC Bingo replaces Hayfork for labels, buttons and the standfirst.
   NOTE: the file supplied is a TRIAL. Its licence text explicitly excludes
   "modifying, reassembling, renaming, storing on publicly available servers" -
   which is precisely what subsetting to WOFF2 and hosting on GitHub Pages does.
   Fine for evaluating the design; the retail family plus a webfont licence is
   required before this goes anywhere public. See fonts/LICENSING.txt. */
/* Founders Grotesk Text (Klim Type Foundry) for body copy - the reading cut,
   not the display one. COMMERCIAL: a webfont licence is required before these
   go on a public CDN. See fonts/LICENSING.txt. */
@font-face {
  font-family: "Founders Grotesk";
  src: url("fonts/founders-text.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk";
  src: url("fonts/founders-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk";
  src: url("fonts/founders-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bingo";
  src: url("fonts/bingo.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- 1. Tokens ---------- */
:is(.noselect, .jli-ms) {
  --bg-base:     #e7e3d9;
  --bg-deep:     #ddd8cb;
  --paper-card:  #f2efe7;
  --paper-photo: #d8d2c4;

  --ink-main:  #3a3128;
  --ink-soft:  #6f6457;
  --ink-faint: #a89c8a;

  --green:      #2f7d3a;
  --green-deep: #1f5e2c;
  --ochre:      #d99a3a;
  --blue-dusty: #7fb0c4;

  --font-display: "Arizona Flare", "Instrument Serif", Georgia, serif;
  --font-label:   "Bingo", "Hayfork", "Inter", -apple-system, sans-serif;
  --font-body:    "Founders Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* The design's content measure. Their grid caps the container at 975px, so
     the full-bleed override above is what lets this be reached. */
  --shell:  1180px;
  --radius: 20px;
}

/* Trigger for ChabadOne's shared form restyler
   (minisites/themes/form-redesign/form-script.js), which only activates when
   --primary-form-color is present on body. */
body.cco_templateless_page {
  --primary-form-color: #2f7d3a;
  background: #e7e3d9;
  margin: 0;
}

/* The platform serves XHTML 1.0 Transitional, whose DTD has no section,
   article, header, footer, nav, figure or figcaption - and an element the
   browser does not recognise defaults to display:inline, which would
   collapse the layout. Declaring them keeps the markup correct under that
   doctype while keeping the real elements, and their semantics, in place.
   This is the only rule that targets bare tags; it is scoped to :is(.noselect, .jli-ms) so
   it cannot leak into the surrounding Chabad.org site. */
/* NOT picture: it is an inline wrapper the browser sizes from its <img>, and
   forcing block on it resized the story and endorsement images. The one place
   it has to be a flex item declares that itself. */
/* Only the three that are still real elements. section, header, nav and
   footer are divs now - ChabadOne's sanitiser strips <section> outright (the
   rendered source of a live install had zero of them, which is what let the
   hero collage escape its containing block and flattened the band
   backgrounds). article, figure and figcaption demonstrably survive. */
:is(.noselect, .jli-ms) article, :is(.noselect, .jli-ms) figure, :is(.noselect, .jli-ms) figcaption { display: block; }

/* ---------- 2. Scoped reset ---------- */
:is(.noselect, .jli-ms),
:is(.noselect, .jli-ms) *,
:is(.noselect, .jli-ms) *::before,
:is(.noselect, .jli-ms) *::after { box-sizing: border-box; }

:is(.noselect, .jli-ms) {
  font-family: var(--font-body);
  /* Founders Grotesk Text has a 630/1000 cap height where Inter has ~727, so
     it sets roughly 13% smaller at the same px. Bumped to compensate; 18.5px
     would restore the exact optical size Inter had at 16px. */
  font-size: 17.5px;
  line-height: 1.58;
  color: var(--ink-soft);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  /* No overflow-x here on purpose. overflow-x:hidden forces overflow-y to
     compute as auto, which makes this element a scroll container - and that
     breaks position:sticky on .ms-header, because sticky would then resolve
     against :is(.noselect, .jli-ms) instead of the viewport. The only things that overflow
     horizontally are the two hero washes, and .jlik-hero already clips those. */
}

:is(.noselect, .jli-ms) h1, :is(.noselect, .jli-ms) h2, :is(.noselect, .jli-ms) h3, :is(.noselect, .jli-ms) h4, :is(.noselect, .jli-ms) p,
:is(.noselect, .jli-ms) ul, :is(.noselect, .jli-ms) ol, :is(.noselect, .jli-ms) li, :is(.noselect, .jli-ms) figure, :is(.noselect, .jli-ms) blockquote, :is(.noselect, .jli-ms) dl, :is(.noselect, .jli-ms) dd {
  margin: 0; padding: 0; border: 0; background: none;
  font-size: inherit; font-weight: inherit; line-height: inherit;
  color: inherit; list-style: none; text-align: inherit;
}
:is(.noselect, .jli-ms) img { max-width: 100%; height: auto; display: block; border: 0; }
:is(.noselect, .jli-ms) a { color: inherit; text-decoration: none; }
:is(.noselect, .jli-ms) button, :is(.noselect, .jli-ms) input, :is(.noselect, .jli-ms) select, :is(.noselect, .jli-ms) textarea { font: inherit; color: inherit; margin: 0; }

/* Restyle the chrome ChabadOne appends. These sit outside :is(.noselect, .jli-ms). */
.jli-ms-page .cco_templateless_template {
  /* ChabadOne ships this bar with an inline width:100%, and it sits outside
     :is(.noselect, .jli-ms) so it never picks up the scoped border-box reset. Without this,
     the padding below is ADDED to 100% and the page scrolls sideways by
     exactly that much. */
  box-sizing: border-box;
  background: var(--bg-deep, #ddd8cb);
  font-family: "Inter", sans-serif;
  font-size: 13px !important;
  text-indent: 0 !important;
  padding-left: 24px !important;
  border-bottom: 1px solid rgba(58, 49, 40, .1);
}
.jli-ms-page .cco_templateless_template a { color: #6f6457 !important; }
.jli-ms-page .cco_templateless_template a:hover { color: #2f7d3a !important; }

/* Delete to keep the Chabad.org share rail. */
.jli-ms-page .page-tools-sidebar { display: none !important; }

.jli-ms-page #BodyContainer .poweredby {
  font-family: "Inter", sans-serif;
  font-size: 12px; color: #a89c8a; text-align: center;
  padding: 26px 16px 34px; background: #ddd8cb;
}
.jli-ms-page #BodyContainer .poweredby .footer-title { font-weight: 600; color: #6f6457; }
.jli-ms-page #BodyContainer .g960 { width: auto !important; max-width: none !important; }

/* ChabadOne's own b"h marker, which it emits above the page content carrying
   .mobile-only. The platform's global.css hides that on desktop, but relying on
   another stylesheet to do it means the marker shows as an empty strip pushing
   the hero down anywhere that CSS is absent - which is exactly what happened.
   So the mobile-only behaviour is implemented here instead. */
:is(.noselect, .jli-ms) .bh { display: none; }
@media (max-width: 960px) {
  :is(.noselect, .jli-ms) .bh {
    display: block;
    font-size: 11px; line-height: 1; color: var(--ink-faint);
    text-align: right; padding: 8px 18px 0; margin: 0;
  }
}

/* ---------- Full-bleed: escaping the 975px grid ----------
   ChabadOne caps its own containers in cco/minisites/global.css:

       div#chabad_main_content { width: 975px; margin: 0 auto; }
       div#chabad_body_content { float: left; width: 975px; }

   Our layout sits inside both, so every full-bleed band background - the
   hero, the deep bands, the counter strip, the footer - stopped at 975px and
   read as a narrow island with paper either side, which is not the design.

   Both ids are inside :is(.noselect, .jli-ms), so `:is(.noselect, .jli-ms) #id` (1,1,0) outranks their
   `div#id` (1,0,1) without needing !important. Width control moves to
   .jlik-shell, which centres the CONTENT while the band backgrounds run edge
   to edge.

   NOTE: the guide states the grid as 975px, so this is a deliberate departure
   from it. Set REVERT below to restore their grid: drop this block and set
   --shell back to 975px. */
:is(.noselect, .jli-ms) #chabad_main_content,
:is(.noselect, .jli-ms) #chabad_body_content {
  width: auto; max-width: none; float: none;
}
/* overflow:hidden on their main content was containing the float; with the
   float gone it would also clip the hero collage's bleed, so it is released
   here and .jlik-hero does the clipping instead. */
:is(.noselect, .jli-ms) #chabad_main_content { overflow: visible; }
/* MOBILE ONLY, and the reason the pinned lesson scene would not stick on a
   phone. minisites/global.css has

       body.mobile div#chabad_body_content { padding: 0 7px; overflow: hidden; }
       body.mobile div#chabad_body_page    { overflow-x: hidden; }

   Both are ancestors of the story. An ancestor with overflow other than
   visible becomes a scroll container, and position:sticky then sticks to THAT
   box instead of the viewport - so the scene pinned to a region the reader had
   already scrolled past and appeared not to pin at all. overflow-x:hidden is
   enough on its own: it computes overflow-y to auto.

   !important because their selectors carry an extra element each
   (body.mobile div#id, 1-1-2) and outrank anything we can write with the id
   alone (1-1-0). Horizontal clipping is not lost - .jlik-hero clips its own
   collage bleed, which is why #chabad_main_content is released just above. */
#chabad_body_page.jli-ms,
#chabad_body_page.jli-ms #chabad_body_content { overflow: visible !important; }

/* display:contents so the sticky header can actually travel.

   position:sticky is limited to its nearest BLOCK containing ancestor, and
   ChabadOne's #chabad_head is only as tall as the header itself (75px) - so
   the header had nowhere to stick to and scrolled away with the page. The
   co:template and co:section wrappers in between are unknown elements and
   therefore display:inline, which sticky skips, so #chabad_head really is the
   limit. Removing its box promotes .ms-header's containing block to
   #chabad_main_content, which spans the whole page.

   Their own rules target descendants (div#chabad_head .chabad_navigator_bar
   and friends), so those still match - only the box goes away. */
:is(.noselect, .jli-ms) #chabad_head { display: contents; }

/* Every ChabadOne wrapper is layout-transparent.

   co:template, co:section, co:editable and co:item are unknown elements, so a
   browser gives them display:inline. That already cost us the sticky header -
   sticky skips inline ancestors when resolving its containing block - and it
   quietly changes flex and grid relationships: a co:section sitting between
   .jlik-register__inner and .jlik-register__side makes the WRAPPER the flex
   item, not the div we wrote the rules for.

   The CTeen theme writes style="display: contents;" on every co:item for the
   same reason; this does it once, for all of them. The colon is escaped
   because it is not a namespace here, just part of the tag name. */
:is(.noselect, .jli-ms) co\:template,
:is(.noselect, .jli-ms) co\:section,
:is(.noselect, .jli-ms) co\:editable,
:is(.noselect, .jli-ms) co\:item,
:is(.noselect, .jli-ms) co\:protected { display: contents; }

/* ---------- 3. Layout primitives ---------- */
:is(.noselect, .jli-ms) .jlik-shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 24px; }

/* 96px top and bottom stacked to 192px between adjacent bands, which read
   as a void. */
:is(.noselect, .jli-ms) .jlik-band { position: relative; padding: 70px 0; }
:is(.noselect, .jli-ms) .jlik-band--tight { padding: 48px 0; }
:is(.noselect, .jli-ms) .jlik-band--paper { background: var(--bg-base); }
:is(.noselect, .jli-ms) .jlik-band--deep  { background: var(--bg-deep); }
:is(.noselect, .jli-ms) .jlik-band--ink   { background: var(--ink-main); color: var(--bg-base); }

/* Eyebrow: Hayfork caps with the v1 green dot */
/* No leading dot. The wide tracking already reads as a label, and the bullet
   was one more small round thing on a page that has plenty. inline-flex and
   the gap stay so the centred variant still centres and so an icon could be
   dropped in later without re-plumbing the rule. */
:is(.noselect, .jli-ms) .jlik-eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-label); font-size: 12.8px;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--green-deep); margin-bottom: 20px;
}
:is(.noselect, .jli-ms) .jlik-band--ink .jlik-eyebrow { color: var(--ochre); }

:is(.noselect, .jli-ms) .jlik-h-sec {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(32px, 3.4vw, 46.4px); line-height: 1.12;
  color: var(--ink-main); text-wrap: balance;
}
:is(.noselect, .jli-ms) .jlik-band--ink .jlik-h-sec { color: var(--bg-base); }

/* Upright Regular rather than italic. Worth knowing why this is a real
   lightening: the only italic face in the package is MediumItalic at weight
   500, so `400 + italic` was matching THAT - the lede was setting in Medium
   Italic, not Regular Italic. Going upright drops both the slant and a weight
   step. There is no Light cut in the package; ABC Arizona Flare Light would
   have to come from Dinamo. */
:is(.noselect, .jli-ms) .jlik-lede {
  font-family: var(--font-display); font-weight: 400; font-style: normal;
  font-size: clamp(19.2px, 1.7vw, 24.8px); line-height: 1.44;
  color: var(--ink-soft); margin-top: 20px; max-width: 58ch; text-wrap: pretty;
}
:is(.noselect, .jli-ms) .jlik-band--ink .jlik-lede { color: rgba(231, 227, 217, .78); }

:is(.noselect, .jli-ms) .jlik-body-copy { margin-top: 18px; max-width: 64ch; }
:is(.noselect, .jli-ms) .jlik-body-copy + .jlik-body-copy { margin-top: 14px; }
:is(.noselect, .jli-ms) .jlik-band--ink .jlik-body-copy { color: rgba(231, 227, 217, .75); }

:is(.noselect, .jli-ms) .jlik-sec-head { max-width: 730px; }
:is(.noselect, .jli-ms) .jlik-sec-head--center { margin: 0 auto; text-align: center; }
:is(.noselect, .jli-ms) .jlik-sec-head--center .jlik-eyebrow { justify-content: center; }
:is(.noselect, .jli-ms) .jlik-sec-head--center .jlik-lede { margin-left: auto; margin-right: auto; }

/* ---------- 4. Buttons ---------- */
:is(.noselect, .jli-ms) .jlik-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border: 1px solid transparent; border-radius: 999px;
  font-family: var(--font-label); font-size: 12.48px;
  letter-spacing: .16em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out),
              background .3s, color .3s, border-color .3s;
}
:is(.noselect, .jli-ms) .jlik-btn::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); transition: left .7s var(--ease-out);
}
:is(.noselect, .jli-ms) .jlik-btn:hover::after { left: 160%; }
:is(.noselect, .jli-ms) .jlik-btn:hover  { transform: translateY(-2px); }
:is(.noselect, .jli-ms) .jlik-btn:active { transform: translateY(0) scale(.985); }

:is(.noselect, .jli-ms) .jlik-btn--primary { background: var(--green); color: #fff; }
:is(.noselect, .jli-ms) .jlik-btn--primary:hover { background: var(--green-deep); }

:is(.noselect, .jli-ms) .jlik-btn--ink { background: var(--ink-main); color: var(--bg-base); }
:is(.noselect, .jli-ms) .jlik-btn--ink:hover { background: #2b241c; }

:is(.noselect, .jli-ms) .jlik-btn--ghost { background: transparent; color: var(--ink-main); border-color: rgba(58,49,40,.38); }
:is(.noselect, .jli-ms) .jlik-btn--ghost:hover { border-color: var(--ink-main); background: rgba(58,49,40,.05); }
:is(.noselect, .jli-ms) .jlik-band--ink .jlik-btn--ghost { color: var(--bg-base); border-color: rgba(231,227,217,.4); }
:is(.noselect, .jli-ms) .jlik-band--ink .jlik-btn--ghost:hover { background: rgba(231,227,217,.1); border-color: var(--bg-base); }

:is(.noselect, .jli-ms) .jlik-btn--sm { padding: 11px 22px; font-size: 11.2px; }
/* Small chevron on the in-page anchor, so it reads as 'scroll down' rather
   than as a second, competing call to action. */
:is(.noselect, .jli-ms) .jlik-btn__arrow { width: 13px; height: 13px; flex: 0 0 auto; opacity: .75;
  transition: transform .3s var(--ease-out); }
:is(.noselect, .jli-ms) .jlik-btn:hover .jlik-btn__arrow { transform: translateY(2px); }
:is(.noselect, .jli-ms) .jlik-btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ---------- 5. Header / navigation ---------- */
:is(.noselect, .jli-ms) .ms-header {
  position: sticky; top: 0; z-index: 500;
  background: rgba(231, 227, 217, .82);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(58, 49, 40, .1);
  transition: box-shadow .35s var(--ease-soft), background .35s;
}
:is(.noselect, .jli-ms) .ms-header.is-stuck {
  background: rgba(231, 227, 217, .95);
  box-shadow: 0 10px 30px -18px rgba(58, 49, 40, .5);
}
:is(.noselect, .jli-ms) .ms-header__inner {
  display: flex; align-items: center; gap: 24px;
  min-height: 74px; padding: 10px 24px;
  width: 100%; max-width: var(--shell); margin: 0 auto;
}
:is(.noselect, .jli-ms) .ms-brand { display: inline-flex; align-items: center; gap: 14px; flex: 0 0 auto; }
:is(.noselect, .jli-ms) .ms-brand__logo { height: 34px; width: auto; }
:is(.noselect, .jli-ms) .ms-brand__divider { width: 1px; height: 28px; background: rgba(58,49,40,.2); }
:is(.noselect, .jli-ms) .ms-brand__center {
  font-family: var(--font-label); font-size: 11.84px; line-height: 1.3;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-main);
  max-width: 200px;
}

:is(.noselect, .jli-ms) .ms-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
:is(.noselect, .jli-ms) .ms-nav a {
  padding: 9px 14px; border-radius: 999px;
  font-family: var(--font-label); font-size: 11.52px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
  transition: color .25s, background .25s;
}
:is(.noselect, .jli-ms) .ms-nav a:hover,
:is(.noselect, .jli-ms) .ms-nav a.is-active { color: var(--green-deep); background: rgba(47,125,58,.09); }

:is(.noselect, .jli-ms) .ms-header__cta { flex: 0 0 auto; }

/* No boxed outline: a rounded-square border sat oddly next to a design built
   on pills and hairlines, and 18px bars floating in a 44px box read as small.
   Bars only, wider and better spaced, with the 44px tap target kept and a
   circular tint appearing on hover/focus so it still feels like a control.
   place-content, NOT place-items: place-items only centres each bar inside
   its own grid row, and with the button 44px tall the three auto rows stretch
   to fill it - the bar centres landed 16.3px apart and the rotated bars met at
   one end, drawing a chevron instead of an X. place-content packs the rows to
   their content and centres the stack, which is what puts the outer bars a
   real 8px from the middle. */
:is(.noselect, .jli-ms) .ms-burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; border-radius: 50%;
  cursor: pointer; place-content: center; justify-items: center;
  transition: background .25s var(--ease-soft);
}
:is(.noselect, .jli-ms) .ms-burger:hover { background: rgba(58,49,40,.07); }
/* Whole-pixel height on purpose: at 1.5px the three bars landed on different
   pixel boundaries and the middle one rasterised visibly heavier than the
   other two. 2px bars with 6px gaps put the outer bar centres exactly 8px from
   the middle, which is the translate each needs to meet in the centre. */
:is(.noselect, .jli-ms) .ms-burger__bar {
  display: block; width: 23px; height: 2px; border-radius: 2px;
  background: var(--ink-main);
  transition: transform .32s var(--ease-out), opacity .18s;
}
:is(.noselect, .jli-ms) .ms-burger__bar + .ms-burger__bar { margin-top: 6px; }
:is(.noselect, .jli-ms) .ms-burger.is-open .ms-burger__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
:is(.noselect, .jli-ms) .ms-burger.is-open .ms-burger__bar:nth-child(2) { opacity: 0; }
:is(.noselect, .jli-ms) .ms-burger.is-open .ms-burger__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

:is(.noselect, .jli-ms) .ms-mobile {
  display: none; border-top: 1px solid rgba(58,49,40,.1);
  background: rgba(231,227,217,.97); padding: 12px 24px 22px;
}
:is(.noselect, .jli-ms) .ms-mobile.is-open { display: block; }
/* :not(.jlik-btn) matters - ".ms-mobile a" is a class-plus-type selector and so
   outranks ":is(.noselect, .jli-ms) .jlik-btn", which meant the Register button inherited this
   rule's display:block and 4px side padding and rendered as left-aligned text
   rather than a centred pill. */
:is(.noselect, .jli-ms) .ms-mobile a:not(.jlik-btn) {
  display: block; padding: 13px 4px;
  font-family: var(--font-label); font-size: 12.8px;
  letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid rgba(58,49,40,.08);
}
:is(.noselect, .jli-ms) .ms-mobile .jlik-btn { display: flex; width: 100%; margin-top: 18px; padding: 16px 30px; }

/* ---------- 6. Hero ---------- */
/* The collage is lifted out of the flow and oversized so it sits BEHIND the
   title and bleeds off the right edge. .jlik-hero keeps overflow:hidden, which is
   what clips the bleed at the viewport. The shell is the positioning context
   so the collage stays anchored to the type grid rather than the screen width
   - anchoring to the viewport leaves a huge gap on wide monitors. */
:is(.noselect, .jli-ms) .jlik-hero { position: relative; padding: 74px 0 104px; overflow: hidden; }
/* Descendant, not a child combinator. This is the collage's containing
   block: if anything ever nests a wrapper between .jlik-hero and
   .jlik-shell - a CMS injecting its own div, say - a `>` rule stops
   matching, the shell is no longer positioned, and the absolutely
   positioned collage sizes itself against the viewport instead. The hero
   holds exactly one shell, so descendant is equivalent and survives that. */
:is(.noselect, .jli-ms) .jlik-hero .jlik-shell { position: relative; }
:is(.noselect, .jli-ms) .jlik-hero__grain {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
:is(.noselect, .jli-ms) .jlik-hero__wash {
  position: absolute; border-radius: 50%; filter: blur(120px);
  z-index: 0; opacity: .11; pointer-events: none;
}
/* Sized as a PERCENTAGE OF THE HERO, not in vw. These are absolutely
   positioned inside .jlik-hero, but vw measures the viewport - and on
   Chabad.org the container is capped at 975px while the window is far wider.
   At 44vw on a 2556px screen each wash came out ~1100px across inside a 975px
   hero, so the two of them covered it completely and the 11% green over 11%
   ochre read as a solid olive wash with the title lost inside it. As a
   percentage they stay the corner accents they are meant to be at any window
   size. */
:is(.noselect, .jli-ms) .jlik-hero__wash--green { width: 44%; aspect-ratio: 1; background: var(--green); top: 14%; left: -15%; }
:is(.noselect, .jli-ms) .jlik-hero__wash--ochre { width: 38%; aspect-ratio: 1; background: var(--ochre); bottom: -12%; right: -10%; }

:is(.noselect, .jli-ms) .jlik-hero__row { position: relative; z-index: 2; display: block; }
:is(.noselect, .jli-ms) .jlik-hero__copy { max-width: 545px; }

/* --- Title: the InDesign lockup, one SVG per word ---------------------
   The lockup is Hayfork JNL converted to outlines and optically kerned by
   hand (solving for a single tracking value gives mean +8.3pt with a
   standard deviation of 4.5 - the L in KABBALAH needs +13.6, YOU needs
   +5.5). No letter-spacing reproduces that, so the real outlines are used.
   Geometry and stagger delays live in lockup.css, generated from the file.

   Each word is a CSS mask filled with currentColor, so the lockup takes the
   theme's text colour and works on paper or on the dark bands. */
/* The lockup paints with currentColor, so the title element sets it. */
:is(.noselect, .jli-ms) .jlik-hero__title { display: block; position: relative; z-index: 2; color: var(--ink-main); }
/* Narrower than the shell so the collage's left edge clears the letterforms -
   and expressed as a PERCENTAGE, because the collage beside it is sized in
   percent too. As a fixed 588px it cleared the lockup at the 1180px width this
   was designed at, but on Chabad.org's 975px grid the collage's left edge
   landed 69px inside the final word and buried the "U" of YOU. 52% is 588px at
   the old width, so the desktop composition is unchanged, and it now holds at
   any container width. The lockup carries aspect-ratio: 4.9024 and positions
   every word in percentages, so height follows width on its own. */
:is(.noselect, .jli-ms) .jlik-hero__lockup { width: 100%; max-width: 52%; margin-bottom: 28px; }

:is(.noselect, .jli-ms) .jlik-lk {
  position: absolute;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-position: center;  mask-position: center;
  opacity: 0;
  animation: jliLockupIn .9s var(--ease-out) forwards;
}
@keyframes jliLockupIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Accessible text for the lockup, which is otherwise decorative masks. */
:is(.noselect, .jli-ms) .jlik-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Hayfork JNL, matching how the lesson deck sets this same sentence. Hayfork
   is a caps-only design - its lowercase codepoints map to the capital forms -
   so text-transform is declared for intent rather than effect. Being condensed
   and heavy, it needs real tracking and open leading at this size. */
:is(.noselect, .jli-ms) .jlik-hero__sub {
  font-family: var(--font-label); font-weight: 400;
  /* Bingo's cap height is 699/1000 against Hayfork's 760, so it sets smaller
     at the same size - nudged up to keep the same optical weight. */
  font-size: clamp(14.4px, 1.15vw, 17.6px);
  line-height: 1.8; letter-spacing: .085em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 26px; max-width: 34em;
  /* balance, so the browser evens the lines out instead of pushing one last
     word onto a line by itself - "life" was stranding alone on line three. */
  text-wrap: balance;
  opacity: 0; animation: jliFadeUp 1s var(--ease-out) 1.5s forwards;
}
@keyframes jliFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Course facts, value first: the figure carries the weight and the label sits
   under it in small caps, four across in one row. That only fits because the
   values are short - keep the start-date and location tokens terse ("Oct 27",
   "In person + Zoom"), not full sentences, or the row wraps. Columns size to
   their content rather than splitting evenly, so it reads as a set of facts
   rather than a table. */
:is(.noselect, .jli-ms) .jlik-spec {
  display: grid; grid-template-columns: repeat(4, auto);
  justify-content: start; gap: 0; margin: 42px 0 0;
  opacity: 0; animation: jliFadeUp 1s var(--ease-out) 1.7s forwards;
}
/* column-reverse: the markup is <dt> then <dd> (proper description-list
   order) but desktop wants the VALUE on top, so the visual order is flipped
   here rather than in the HTML. Mobile drops back to plain column. */
:is(.noselect, .jli-ms) .jlik-spec__cell { display: flex; flex-direction: column-reverse; }
/* Divider sits midway between two facts - equal margin and padding either
   side - and takes its height from the cell, so it spans value plus label.
   18, not 28: the four values need 407px of text and .jlik-hero__copy caps the row
   at 545px, so at 28 the three gutters ate 168px and the two longest values
   wrapped to a second line. 18 brings the row to 515px and every value sits on
   one line with ~30px to spare. That spare is the whole budget - a longer
   start-date or location value will wrap again, which is the intended
   graceful failure rather than overflowing into the collage. */
:is(.noselect, .jli-ms) .jlik-spec__cell + .jlik-spec__cell {
  margin-left: 18px; padding-left: 18px;
  border-left: 1px solid rgba(58,49,40,.2);
}
/* Fixed size, NOT a vw clamp. .jlik-hero__copy is capped at 545px at every desktop
   width, so a viewport-scaled font grew the text while its container stayed
   put: the row fitted on one line at 1180px and wrapped again at 1280 and
   1440. Sizing the value to the box instead of the viewport is what keeps all
   four facts on one line at every width. */
:is(.noselect, .jli-ms) .jlik-spec__val {
  font-family: var(--font-display); font-weight: 500;
  font-size: 20.8px; line-height: 1.08;
  color: var(--ink-main);
}
:is(.noselect, .jli-ms) .jlik-spec__val small {
  font-family: var(--font-label); font-size: .46em; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); margin-left: .2em;
}
:is(.noselect, .jli-ms) .jlik-spec__label {
  margin-top: 8px; font-family: var(--font-label); font-size: 8.96px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
}

:is(.noselect, .jli-ms) .jlik-hero .jlik-btn-row { opacity: 0; animation: jliFadeUp 1s var(--ease-out) 1.9s forwards; }

/* --- The layered collage.
       Layer geometry lives in hero-layers.css, generated from the InDesign
       placement rects. Each piece is a full-size render of the collage box, so
       the aspect ratio here is what fixes the composition. --- */
:is(.noselect, .jli-ms) .jlik-collage {
  position: absolute; z-index: 1; pointer-events: none;
  /* Sized so the box (0.779 tall per unit wide) still fits inside the hero -
     .jlik-hero clips it, so anything taller loses its bottom edge. Raised above
     the title's top so the artwork rises behind the lockup's right end.
     Narrowing the width (rather than shifting the offset) moves the LEFT
     edge right, which opens up the gap to the text while leaving the
     right-hand overhang untouched. */
  top: -40px; right: -13%; width: 58%;
  aspect-ratio: 914 / 712;      /* the collage box in the poster, in points */
}
:is(.noselect, .jli-ms) .jlik-cg-piece {
  position: absolute; inset: 0;
  background-repeat: no-repeat; background-position: center;
  background-size: 100% 100%;
  opacity: 0; animation: jliPieceIn 1s var(--ease-out) forwards;
}
:is(.noselect, .jli-ms) .jlik-cg-block {
  position: absolute; z-index: 5;
  opacity: 0; animation: jliPieceIn 1s var(--ease-out) forwards;
}
@keyframes jliPieceIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 7. Counter band ---------- */
:is(.noselect, .jli-ms) .jlik-counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
:is(.noselect, .jli-ms) .jlik-counter { text-align: center; padding: 8px; }
:is(.noselect, .jli-ms) .jlik-counter__num {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(38.4px, 4vw, 54.4px); line-height: 1; color: var(--ochre);
}
:is(.noselect, .jli-ms) .jlik-counter__label {
  margin-top: 10px; font-family: var(--font-label); font-size: 11.52px;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(231,227,217,.62);
}

/* ---------- 8. Two-column feature ---------- */
:is(.noselect, .jli-ms) .jlik-split { display: flex; align-items: center; gap: 60px; }
:is(.noselect, .jli-ms) .jlik-split--flip { flex-direction: row-reverse; }
:is(.noselect, .jli-ms) .jlik-split__copy { flex: 1 1 50%; min-width: 0; }
:is(.noselect, .jli-ms) .jlik-split__art  { flex: 1 1 50%; min-width: 0; }

:is(.noselect, .jli-ms) .jlik-art-pair { position: relative; padding: 0 0 48px 48px; }
/* No panels behind these two. Both collages are baked to this band's own colour
   by build-assets.py (ABOUT_VARIANTS), so they sit straight on the band and the
   pair reads as one field of artwork rather than two floating cards - the same
   treatment the hero and the lessons already use. Worth knowing why the ground
   matters: the panels are what allowed the darker --bg-deep ground here, and
   with them gone that step would show as a visible rectangle.
   contain, not cover: cropping would cut pieces off the collages. */
:is(.noselect, .jli-ms) .jlik-art-pair__main img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
:is(.noselect, .jli-ms) .jlik-art-pair__inset {
  position: absolute; bottom: 0; left: 0; width: 44%;
}
/* A hover lift stands in for the floating-card look. Gated on hover:hover so a
   touch device cannot leave the artwork stuck in the lifted state after a tap. */
@media (hover: hover) {
  :is(.noselect, .jli-ms) .jlik-art-pair__main,
  :is(.noselect, .jli-ms) .jlik-art-pair__inset { transition: transform .55s var(--ease-out); }
  :is(.noselect, .jli-ms) .jlik-art-pair__main:hover,
  :is(.noselect, .jli-ms) .jlik-art-pair__inset:hover { transform: translateY(-8px); }
}
:is(.noselect, .jli-ms) .jlik-art-pair__inset img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
:is(.noselect, .jli-ms) .jlik-art-pair__rule {
  position: absolute; top: -18px; right: -18px; width: 56%; height: 56%;
  border-top: 2px solid var(--ochre); border-right: 2px solid var(--ochre);
  border-radius: 0 var(--radius) 0 0; opacity: .5; z-index: -1;
}

/* ---------- 9. Lesson cards ---------- */
:is(.noselect, .jli-ms) .lessons {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 22px; margin-top: 52px;
}
:is(.noselect, .jli-ms) .lesson {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-card); border: 1px solid rgba(58,49,40,.1);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s;
}
:is(.noselect, .jli-ms) .lesson:hover {
  transform: translateY(-5px); border-color: rgba(47,125,58,.32);
  box-shadow: 0 26px 50px -26px rgba(58,49,40,.42);
}
/* The six collages have different aspect ratios; a fixed square box with
   object-fit:contain lines every card's text up. contain, never cover - the
   artwork must not crop. build-assets.py normalises each crop's ground so the
   letterboxing is invisible. */
:is(.noselect, .jli-ms) .lesson__art { background: var(--paper-card); }
:is(.noselect, .jli-ms) .lesson__art picture { display: block; width: 100%; aspect-ratio: 1 / 1; }
:is(.noselect, .jli-ms) .lesson__art img { width: 100%; height: 100%; object-fit: contain; }

:is(.noselect, .jli-ms) .lesson__body { padding: 26px 28px 30px; flex: 1 1 auto; }
:is(.noselect, .jli-ms) .lesson__num {
  font-family: var(--font-display); font-weight: 500;
  font-size: 38.4px; line-height: 1; color: var(--ochre); opacity: .85;
}
:is(.noselect, .jli-ms) .lesson__label {
  display: block; font-family: var(--font-label); font-size: 10.88px;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--green-deep); margin: 10px 0 12px;
}
:is(.noselect, .jli-ms) .lesson__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 23.68px; line-height: 1.2; color: var(--ink-main); text-wrap: balance;
}
:is(.noselect, .jli-ms) .lesson__title em { font-style: italic; }
:is(.noselect, .jli-ms) .lesson__text { margin-top: 12px; font-size: 16.16px; color: var(--ink-soft); }
:is(.noselect, .jli-ms) .lesson__rule { margin-top: 20px; height: 2px; width: 44px; background: var(--green); opacity: .6; }

/* ---------- 9b. Lessons as scrollytelling ----------
   A pinned scene: one lesson at a time, centred, cross-fading as you scroll.
   The six lessons are stacked on top of each other rather than laid out in a
   column, so you never see more than one.

   Two layouts live here on purpose:

   DEFAULT (no JS) - a plain readable article. The scene is a normal two-column
   grid, the six lessons stack down the page, the first frame shows. If a
   ChabadOne WYSIWYG field strips the script tag nobody loses the syllabus.

   .jlik-story-on (JS present) - the enhanced version below. script.js adds the class
   and sets .jlik-story's height from the step count, so deleting a lesson cannot
   desynchronise the scroll mapping from the markup.

   position: sticky depends on NO ancestor having clipped overflow -
   overflow-x:hidden forces overflow-y to auto, making that ancestor a scroll
   container and silently killing the pin. That is why :is(.noselect, .jli-ms) carries no
   overflow rule. */
:is(.noselect, .jli-ms) .jlik-story { margin-top: 54px; }
/* rail | artwork | text */
:is(.noselect, .jli-ms) .jlik-story__body {
  display: grid; grid-template-columns: auto minmax(0, 48%) minmax(0, 1fr);
  gap: 40px; align-items: start;
}
:is(.noselect, .jli-ms) .jlik-story__head { margin-bottom: 34px; }

/* No panel behind the artwork: the crops are opaque, so instead of matting
   them their ground is baked to --bg-deep (this band's colour) by
   build-assets.py. The collage then reads as floating directly on the band.
   If the plate is ever wanted back, give it background: var(--paper-card) and
   point GROUND_TOKEN in build-assets.py at --paper-card again. */
:is(.noselect, .jli-ms) .jlik-story__plate {
  position: relative; aspect-ratio: 1 / 1;
  background: transparent; overflow: hidden;
}
:is(.noselect, .jli-ms) .jlik-story__frame {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.015);
}
:is(.noselect, .jli-ms) .jlik-story.jlik-story-anim .jlik-story__frame {
  transition: opacity .5s var(--ease-soft), transform .8s var(--ease-out);
}
:is(.noselect, .jli-ms) .jlik-story__frame img { width: 100%; height: 100%; object-fit: contain; }
:is(.noselect, .jli-ms) .jlik-story__frame:first-of-type { opacity: 1; transform: none; }

/* Vertical rail down the left of the scene. Falls back to a horizontal strip
   under the artwork on narrow screens, where a rail would only waste width. */
:is(.noselect, .jli-ms) .jlik-story__meter {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  align-self: center; margin: 0;
}
:is(.noselect, .jli-ms) .jlik-story__count { display: none; }   /* the beads carry the numbers now */
/* A bead chain: six numbered beads joined by a line that fills in behind them.
   Six discrete beads say "six lessons" at a glance in a way a continuous bar
   cannot, and the numbers mean the rail doubles as a table of contents. The
   connectors are flex-stretch spacers, so the chain adapts to whatever height
   the scene gives it without any measurement in JS.
   Beads are buttons: clicking one jumps to that lesson, so the pinned section
   can be skipped rather than scrolled through. */
/* Capped rather than stretched: as flex:1 1 auto with align-self:stretch the
   chain grew to the full height of the (now much larger) artwork row, leaving
   the beads strung far apart. */
:is(.noselect, .jli-ms) .jlik-story__chain {
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; position: relative;
  height: clamp(300px, 52vh, 355px);
}
/* The rail and its progress fill are drawn ON THE CHAIN, not as elements
   between the beads. They used to be five <i class="jlik-story__link">
   connectors; ChabadOne's sanitiser deletes empty elements, so on a live
   install 5 were sent and 0 survived, leaving the beads bunched flush
   together. A pseudo-element comes from the stylesheet, so there is nothing
   in the HTML for a sanitiser to take away.
   The insets are half a bead (30px / 2), so the rail runs between the centre
   of the first bead and the centre of the last. */
:is(.noselect, .jli-ms) .jlik-story__chain::before,
:is(.noselect, .jli-ms) .jlik-story__chain::after {
  content: ""; position: absolute; left: 50%; margin-left: -1px;
  top: 15px; width: 2px; border-radius: 1px;
}
:is(.noselect, .jli-ms) .jlik-story__chain::before {
  bottom: 15px; background: rgba(58,49,40,.22);
}
:is(.noselect, .jli-ms) .jlik-story__chain::after {
  height: calc((100% - 30px) * var(--fill, 0));
  background: var(--green); opacity: .5;
  transition: height .4s var(--ease-out);
}

:is(.noselect, .jli-ms) .jlik-story__bead {
  flex: 0 0 auto; position: relative;
  width: 30px; height: 30px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(58,49,40,.26);
  /* opaque, not transparent: the rail runs behind the beads now */
  background: var(--bg-deep); position: relative; z-index: 1;
  color: var(--ink-faint);
  font-family: var(--font-label); font-size: 8.96px; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  display: grid; place-items: center; cursor: pointer;
  transition: background .3s var(--ease-out), border-color .3s, color .3s, transform .3s var(--ease-out);
}
/* the bead is 30px; give it a comfortable hit area either side */
:is(.noselect, .jli-ms) .jlik-story__bead::after {
  content: ""; position: absolute; top: -4px; bottom: -4px; left: -13px; right: -13px;
}
:is(.noselect, .jli-ms) .jlik-story__bead.done {
  border-color: var(--green); color: var(--green-deep);
}
:is(.noselect, .jli-ms) .jlik-story__bead[aria-current="true"] {
  background: var(--green); border-color: var(--green);
  color: var(--bg-base); transform: scale(1.18);
}
:is(.noselect, .jli-ms) .jlik-story__bead:hover { border-color: var(--ochre); color: var(--ink-main); }
:is(.noselect, .jli-ms) .jlik-story__bead[aria-current="true"]:hover { color: var(--bg-base); border-color: var(--ochre); }
:is(.noselect, .jli-ms) .jlik-story__bead:focus-visible { outline: 2px solid var(--ochre); outline-offset: 4px; }

:is(.noselect, .jli-ms) .jlik-story__num {
  font-family: var(--font-display); font-weight: 500;
  font-size: 38.4px; line-height: 1; color: var(--ochre); opacity: .85;
}
:is(.noselect, .jli-ms) .jlik-story__title {
  margin-top: 10px; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(24px, 2.2vw, 33.6px); line-height: 1.18;
  color: var(--ink-main); text-wrap: balance;
}
:is(.noselect, .jli-ms) .jlik-story__title em { font-style: italic; }
:is(.noselect, .jli-ms) .jlik-story__text { margin-top: 14px; max-width: 46ch; color: var(--ink-soft); }
:is(.noselect, .jli-ms) .jlik-story__rule { margin-top: 22px; height: 2px; width: 44px; background: var(--green); opacity: .6; }

/* default flow: lessons read one after another */
:is(.noselect, .jli-ms) .jlik-story__step + .jlik-story__step { margin-top: 44px; }

/* --- enhanced: pinned scene, one lesson centred at a time --- */
:is(.noselect, .jli-ms) .jlik-story.jlik-story-on { position: relative; margin-top: 0; }  /* height set by script.js */
/* With the heading inside the pinned scene, three paddings used to stack above
   it - the band's 96px, .jlik-story's 54px margin and the scene's own 86px - which
   read as a big empty gap before the section. The scene keeps its 86px (it has
   to clear the sticky header); the other two collapse. script.js adds this
   class to the section, so it only applies when the pinned version is live.
   Equal specificity to `:is(.noselect, .jli-ms) .jlik-band`, so it must stay after it in the file. */
:is(.noselect, .jli-ms) .jlik-band--story { padding-top: 18px; padding-bottom: 0; }
/* The heading rides along inside the pinned scene rather than scrolling away
   above it, so it stays on screen for all six lessons. Flex column: heading
   held at the top, the lesson centred in the space that is left. */
:is(.noselect, .jli-ms) .jlik-story.jlik-story-on .jlik-story__scene {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: center; gap: 30px;
  padding: 86px 0 40px;          /* clears the sticky site header */
  box-sizing: border-box;
}
:is(.noselect, .jli-ms) .jlik-story.jlik-story-on .jlik-story__head { flex: 0 0 auto; margin-bottom: 0; }
:is(.noselect, .jli-ms) .jlik-story.jlik-story-on .jlik-story__body { flex: 0 1 auto; align-items: center; }
/* Height drives the plate, so it can never outgrow a short window. Sized to
   leave room for the heading above it: on an 855px viewport the heading takes
   about 210px, which with this cap totals well under the space available. */
/* With no panel behind it the artwork can run much larger - the empty part of
   the box is invisible, so only the image's own size reads. The middle term
   reserves room for the heading, gap and meter, so a short window shrinks the
   art instead of crowding the heading. */
:is(.noselect, .jli-ms) .jlik-story.jlik-story-on .jlik-story__plate {
  width: 100%; aspect-ratio: auto;
  height: min(60vh, calc(100vh - 420px), 660px);
}
:is(.noselect, .jli-ms) .jlik-story.jlik-story-on .jlik-story__steps {
  position: relative; min-height: 300px; align-self: center;
}
/* No transition until .jlik-story-anim lands a frame later. Without that, the five
   inactive lessons animate from their default visible state down to hidden on
   load - a visible flash of all six overlapping. */
:is(.noselect, .jli-ms) .jlik-story.jlik-story-on .jlik-story__step {
  position: absolute; inset: 0; margin: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(14px); pointer-events: none;
}
:is(.noselect, .jli-ms) .jlik-story.jlik-story-on.jlik-story-anim .jlik-story__step {
  transition: opacity .45s var(--ease-soft), transform .55s var(--ease-out);
}
:is(.noselect, .jli-ms) .jlik-story.jlik-story-on .jlik-story__step.is-active {
  opacity: 1; transform: none; pointer-events: auto;
}
:is(.noselect, .jli-ms) .jlik-story-on .jlik-story__frame { opacity: 0; transform: scale(1.015); }
:is(.noselect, .jli-ms) .jlik-story-on .jlik-story__frame.is-on { opacity: 1; transform: none; }

@media (max-width: 960px) {
  :is(.noselect, .jli-ms) .jlik-story__body { grid-template-columns: 1fr; gap: 18px; }
  :is(.noselect, .jli-ms) .jlik-story__meter { flex-direction: row; align-self: auto; justify-content: center; }
  /* Capped and centred: at full width the six beads were strung right across
     the screen and read as a rule rather than a chain. */
  :is(.noselect, .jli-ms) .jlik-story__chain {
    flex-direction: row; height: auto; width: 100%; max-width: 272px;
  }
  /* rail runs left-to-right here; inset is half a 26px bead */
  :is(.noselect, .jli-ms) .jlik-story__chain::before,
  :is(.noselect, .jli-ms) .jlik-story__chain::after {
    top: 50%; margin-left: 0; margin-top: -1px;
    left: 13px; width: auto; height: 2px;
  }
  :is(.noselect, .jli-ms) .jlik-story__chain::before { right: 13px; bottom: auto; }
  :is(.noselect, .jli-ms) .jlik-story__chain::after {
    right: auto; width: calc((100% - 26px) * var(--fill, 0)); height: 2px;
    transition: width .4s var(--ease-out);
  }
  :is(.noselect, .jli-ms) .jlik-story__bead { width: 26px; height: 26px; font-size: 8.32px; }
  :is(.noselect, .jli-ms) .jlik-story__bead::after { top: -13px; bottom: -13px; left: -4px; right: -4px; }
  :is(.noselect, .jli-ms) .jlik-story { margin-top: 34px; }
  /* script.js moves .jlik-story__head out of .jlik-story__scene at this width, so the
     syllabus heading scrolls away normally instead of being pinned - a phone
     screen cannot hold the heading and a lesson at the same time. The child
     combinator only matches once the move has happened, and it has to restore
     the margin that the .jlik-story-on rule above zeroes for the flex layout. */
  /* Child combinator ON PURPOSE - do not relax this one. It is what tells
     apart a head that script.js has moved OUT to be a direct child of
     .jlik-story from one still nested in .jlik-story__scene. */
  :is(.noselect, .jli-ms) .jlik-story.jlik-story-on > .jlik-story__head { margin-bottom: 24px; }
  /* flex-start, not centre. With the heading moved out the scene's contents no
     longer fill the viewport, and centring split the 150px of slack evenly -
     half of it landing as a hole between the heading and the chain, which is
     the first thing you see when the scene pins. Packed to the top, the whole
     gap is the padding that clears the sticky header, and the leftover sits
     harmlessly below the last line. The artwork also grows to take some of it.
     100px top: the mobile header is 75px and sticky, and the pinned scene sits
     under it - at 72px the bead chain was three pixels BEHIND the header. This
     is the floor, not a design choice; shrink the header if the gap matters. */
  :is(.noselect, .jli-ms) .jlik-story.jlik-story-on .jlik-story__scene {
    justify-content: flex-start; padding: 100px 0 28px; gap: 18px;
  }
  :is(.noselect, .jli-ms) .jlik-story.jlik-story-on .jlik-story__plate { height: min(40vh, 330px); }

  /* --- mobile: a vertical snap carousel instead of the pinned scene -------
     Reading six lessons through the pinned version costs five viewport-heights
     of scrolling on a phone, and the numbered chain reads as pagination, so it
     invites a flick rather than a scroll. script.js pairs each lesson's
     artwork with its text into a slide, stacks the six in a snap track and
     lets you flick through them; the chain becomes the pagination and stays
     tappable. It puts the DOM back on a wider viewport, so the desktop scene
     is untouched.

     A vertical scroller nested inside vertical page scroll can capture the
     page's own scrolling, which is the known cost of this pattern. Two things
     hold it down: the track is deliberately SHORTER than the viewport, so
     there is always page above and below it to drag instead; and
     overscroll-behavior is left at auto, NOT contain, so a flick at the last
     lesson chains through to the page rather than dead-ending. Do not add
     overscroll-behavior: contain here - it trades a small annoyance for a
     trapped page. */
  :is(.noselect, .jli-ms) .jlik-story.jlik-story--swipe { height: auto !important; }
  :is(.noselect, .jli-ms) .jlik-story.jlik-story--swipe .jlik-story__scene {
    position: static; height: auto; padding: 0; display: block;
  }
  /* Progress runs down the left gutter as a stack of ticks - the ones behind
     the current lesson green, the current one ochre and longer, the rest quiet
     - with the status line and Contents sharing the top row beside it. The
     beads stay in the DOM for desktop, hidden here. */
  :is(.noselect, .jli-ms) .jlik-story.jlik-story--swipe .jlik-story__body {
    display: flex; align-items: flex-start; gap: 14px;
  }
  :is(.noselect, .jli-ms) .jlik-story.jlik-story--swipe .jlik-story__meter { display: none; }

  :is(.noselect, .jli-ms) .jlik-story__ticks {
    flex: 0 0 auto; display: flex; flex-direction: column;
    align-items: flex-start; gap: 7px; padding-top: 8px;
  }
  /* Width and height carry the state as well as colour, so the current lesson
     is still findable if the ochre and the greys read the same to you. */
  :is(.noselect, .jli-ms) .jlik-story__ticks i {
    width: 14px; height: 2px; border-radius: 2px;
    background: rgba(58,49,40,.22);
    transition: width .3s var(--ease-out), height .3s var(--ease-out),
                background .3s var(--ease-out);
  }
  :is(.noselect, .jli-ms) .jlik-story__ticks i.done { background: var(--green-deep); opacity: .5; }
  :is(.noselect, .jli-ms) .jlik-story__ticks i.now {
    width: 23px; height: 3px; background: var(--ochre); opacity: 1;
  }

  :is(.noselect, .jli-ms) .jlik-story__main { flex: 1 1 auto; min-width: 0; }
  :is(.noselect, .jli-ms) .jlik-story__bar { padding-bottom: 15px; }
  :is(.noselect, .jli-ms) .jlik-story__now {
    margin: 0; font-family: var(--font-label); font-size: 10.24px;
    letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
  }
  :is(.noselect, .jli-ms) .jlik-story__now b { font-weight: inherit; color: var(--ochre); }
  :is(.noselect, .jli-ms) .jlik-story__track { min-width: 0; }
  /* The pinned scene's plate and step wrappers are empty in carousel mode -
     their children now live in the slides. */
  :is(.noselect, .jli-ms) .jlik-story.jlik-story--swipe .jlik-story__art,
  :is(.noselect, .jli-ms) .jlik-story.jlik-story--swipe .jlik-story__steps { display: none; }
  :is(.noselect, .jli-ms) .jlik-story.jlik-story--swipe .jlik-story__meter { margin-bottom: 18px; }

  :is(.noselect, .jli-ms) .jlik-story__track {
    height: min(76vh, 640px);
    overflow-y: auto; overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  :is(.noselect, .jli-ms) .jlik-story__track::-webkit-scrollbar { width: 0; height: 0; }
  :is(.noselect, .jli-ms) .jlik-story__track:focus-visible {
    outline: 2px solid var(--ochre); outline-offset: 8px; border-radius: 4px;
  }
  :is(.noselect, .jli-ms) .jlik-story__slide {
    height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
    box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: flex-start;
  }
  /* Inside a slide the artwork and the lesson are ordinary blocks, not the
     stacked absolute layers the pinned scene needs. */
  /* flex-shrink 1 with min-height 0, so on a short screen the ARTWORK gives
     way to the text rather than the slide overflowing: at 360x640 the longest
     lesson (02) ran 28px past the slide with a fixed-height frame. object-fit
     is contain, so the image just sets smaller. The text never shrinks - it is
     the content. */
  :is(.noselect, .jli-ms) .jlik-story.jlik-story--swipe .jlik-story__frame {
    position: static; inset: auto; display: block;
    flex: 0 1 auto; min-height: 0;
    opacity: 1; transform: none; height: min(34vh, 290px);
  }
  :is(.noselect, .jli-ms) .jlik-story.jlik-story--swipe .jlik-story__step {
    position: static; inset: auto; flex: 0 0 auto; margin: 18px 0 0;
    opacity: 1; transform: none; pointer-events: auto;
    display: block;
  }
  :is(.noselect, .jli-ms) .jlik-story.jlik-story--swipe .jlik-story__num { font-size: 32px; }
  :is(.noselect, .jli-ms) .jlik-story.jlik-story--swipe .jlik-story__rule { margin-top: 18px; }
  :is(.noselect, .jli-ms) .jlik-story.jlik-story-on .jlik-story__steps { min-height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  /* No pinning and no swapping - the six lessons simply read in order. */
  :is(.noselect, .jli-ms) .jlik-story.jlik-story-on { height: auto !important; }
  :is(.noselect, .jli-ms) .jlik-story.jlik-story-on .jlik-story__scene { position: static; height: auto; padding: 0; display: block; }
  :is(.noselect, .jli-ms) .jlik-story.jlik-story-on .jlik-story__steps { min-height: 0; }
  :is(.noselect, .jli-ms) .jlik-story.jlik-story-on .jlik-story__step {
    position: static; opacity: 1; transform: none; pointer-events: auto;
  }
  :is(.noselect, .jli-ms) .jlik-story.jlik-story-on .jlik-story__step + .jlik-story__step { margin-top: 44px; }
  :is(.noselect, .jli-ms) .jlik-story__plate { display: none; }
}

/* ---------- 10. Detail cards ---------- */
/* No margin-top: this grid used to sit under a section head, which is gone, so
   the band's own padding is the whole gap. */
:is(.noselect, .jli-ms) .jlik-details {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 20px;
}
:is(.noselect, .jli-ms) .jlik-detail {
  padding: 28px 24px; border-radius: var(--radius);
  background: rgba(255,255,255,.5); border: 1px solid rgba(58,49,40,.12);
}
:is(.noselect, .jli-ms) .jlik-detail__icon {
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 16px;
  display: grid; place-items: center;
  background: rgba(47,125,58,.11); color: var(--green-deep);
}
:is(.noselect, .jli-ms) .jlik-detail__icon .jlik-ico { width: 20px; height: 20px; }
:is(.noselect, .jli-ms) .jlik-detail__label {
  font-family: var(--font-label); font-size: 10.88px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
}
:is(.noselect, .jli-ms) .jlik-detail__value {
  margin-top: 8px; font-family: var(--font-display); font-weight: 500;
  font-size: 20.8px; line-height: 1.24; color: var(--ink-main);
}
:is(.noselect, .jli-ms) .jlik-detail__note {
  /* tighter than the 1.58 body rhythm: these are one- or two-line notes
     in a narrow column, where the inherited leading reads as a gap. */
  margin-top: 6px; font-size: 15.2px; line-height: 1.35; color: var(--ink-soft);
}

/* ---------- 11. Instructor ---------- */
:is(.noselect, .jli-ms) .jlik-teacher { display: flex; align-items: center; gap: 48px; }
/* aspect-ratio on the CONTAINER, not just the image: the monogram fallback is
   absolutely positioned, so without this the box collapses to nothing the
   moment there is no <img> to give it height. */
:is(.noselect, .jli-ms) .jlik-teacher__photo { flex: 0 0 290px; position: relative; aspect-ratio: 1 / 1; }
/* An instructor photo a centre has not set yet. This replaces
   onerror="this.remove()", which Chabad.org found was destroying the element in
   the editor before an admin could give it a src - the empty src fired the
   handler immediately. CSS cannot run too early and cannot delete anything, so
   the field survives to be edited. Hiding the img UNCOVERS .jlik-teacher__mono
   underneath - the instructor's initials on a paper ground - which is the
   designed no-photo state, so the dashed ::after ring stays in both. */
:is(.noselect, .jli-ms) .jlik-teacher__photo img[src=""],
:is(.noselect, .jli-ms) .jlik-teacher__photo img:not([src]) { display: none; }
:is(.noselect, .jli-ms) .jlik-teacher__photo img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; background: var(--paper-photo);
  box-shadow: 0 28px 56px -26px rgba(58,49,40,.5);
}
/* Fallback for a center with no instructor photo yet: the initials in the
   display face, in the same circle and dashed ring the photo would occupy. It
   sits UNDER the image, so a real photo simply covers it - delete the <img>, or
   let the onerror guard drop a broken URL, and the monogram shows. Chosen over
   a silhouette or a stock headshot: it reads as "not supplied" rather than as a
   stranger's face, and it costs no asset. */
:is(.noselect, .jli-ms) .jlik-teacher__mono {
  position: absolute; inset: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper-photo);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(41.6px, 7vw, 57.6px); line-height: 1;
  letter-spacing: .05em; color: var(--ink-faint);
}
:is(.noselect, .jli-ms) .jlik-teacher__photo::after {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  border: 1px dashed rgba(47,125,58,.4); pointer-events: none;
}
:is(.noselect, .jli-ms) .jlik-teacher__copy { flex: 1 1 auto; min-width: 0; }
:is(.noselect, .jli-ms) .jlik-teacher__name {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28.8px, 2.5vw, 38.4px); line-height: 1.12; color: var(--ink-main);
}
:is(.noselect, .jli-ms) .jlik-teacher__role {
  margin-top: 9px; font-family: var(--font-label); font-size: 11.52px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--green-deep);
}

/* ---------- 12. Endorsement cards ---------- */
/* Shared by the endorsement block and the archived student-quote block, which
   is why the class names still say "quote". min() on the track floor so a 320px
   phone cannot be forced wider than its own content box. */
:is(.noselect, .jli-ms) .jlik-quotes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 22px; margin-top: 46px;
}
:is(.noselect, .jli-ms) .jlik-quote {
  display: flex; flex-direction: column;
  padding: 32px 28px; border-radius: var(--radius);
  background: var(--paper-card); border: 1px solid rgba(58,49,40,.1);
}
:is(.noselect, .jli-ms) .jlik-quote__mark {
  font-family: var(--font-display); font-size: 54.4px; line-height: .6;
  color: var(--ochre); opacity: .5; margin-bottom: 12px;
}
/* Upright, NOT italic. There is no Regular Italic in the package - the only
   italic face is MediumItalic at weight 500 - so `400 + italic` silently
   matched that and set the whole quote a weight heavier as well as slanted.
   Same trap the lede hit. Book titles still italicise via <em>, which is a
   real semantic italic and is fine. */
:is(.noselect, .jli-ms) .jlik-quote__text {
  font-family: var(--font-display); font-style: normal; font-weight: 400;
  font-size: 18.24px; line-height: 1.5; color: var(--ink-main); flex: 1 1 auto;
}
:is(.noselect, .jli-ms) .jlik-quote__text em { font-style: italic; }
:is(.noselect, .jli-ms) .jlik-quote__who {
  margin-top: 22px; display: flex; align-items: flex-start; gap: 13px;
}
/* The <picture> is the flex item, not the <img> - without this the wrapper
   stretches and the circle goes oval on the longer credit lines. */
:is(.noselect, .jli-ms) .jlik-quote__who picture { flex: 0 0 auto; display: block; }
:is(.noselect, .jli-ms) .jlik-quote__who img {
  display: block; width: 50px; height: 50px;
  border-radius: 50%; object-fit: cover;
  background: var(--paper-photo); flex: 0 0 auto;
}
:is(.noselect, .jli-ms) .jlik-quote__name {
  font-family: var(--font-label); font-size: 11.52px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-main);
}
/* --ink-soft and a real line-height: this used to hold "Anytown, NJ" and now
   holds institutions and book titles that wrap to three lines. */
:is(.noselect, .jli-ms) .jlik-quote__place {
  display: inline-block; margin-top: 4px;
  font-size: 13.44px; line-height: 1.4; color: var(--ink-soft);
}
:is(.noselect, .jli-ms) .jlik-quote__place em { font-style: italic; }

/* ---------- 13. Register band ---------- */
:is(.noselect, .jli-ms) .jlik-register { position: relative; overflow: hidden; }
:is(.noselect, .jli-ms) .jlik-register__inner {
  display: flex; align-items: center; gap: 48px;
  padding: 54px 52px; border-radius: 28px;
  background: linear-gradient(135deg, #2f7d3a 0%, #1f5e2c 100%);
  color: #fff; box-shadow: 0 34px 70px -34px rgba(31,94,44,.75);
}
:is(.noselect, .jli-ms) .jlik-register__copy { flex: 1 1 auto; min-width: 0; }
:is(.noselect, .jli-ms) .jlik-register .jlik-eyebrow { color: #A8D79E; }
:is(.noselect, .jli-ms) .jlik-register__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30.4px, 3vw, 43.2px); line-height: 1.12; text-wrap: balance;
}
:is(.noselect, .jli-ms) .jlik-register__text { margin-top: 14px; color: rgba(255,255,255,.85); max-width: 52ch; }
:is(.noselect, .jli-ms) .jlik-register__side { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; }
:is(.noselect, .jli-ms) .jlik-register__side .jlik-btn--primary { background: #fff; color: var(--green-deep); box-shadow: none; }
:is(.noselect, .jli-ms) .jlik-register__side .jlik-btn--primary:hover { background: var(--bg-base); }
:is(.noselect, .jli-ms) .jlik-register__side .jlik-btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }
:is(.noselect, .jli-ms) .jlik-register__side .jlik-btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* Slot for an embedded ChabadOne form. */
:is(.noselect, .jli-ms) .jlik-form-slot {
  margin-top: 44px; padding: 34px 30px; border-radius: var(--radius);
  background: var(--paper-card); border: 1px solid rgba(58,49,40,.12);
}
:is(.noselect, .jli-ms) .jlik-form-slot .form-all { max-width: none !important; width: 100% !important; }

/* ---------- 14. FAQ ---------- */
/* ---------- Upcoming courses (block 10b) -----------------------------------
   Two portrait cards. The key art carries each course's own display type, so
   the card chrome stays quiet and lets the images do the talking: no accent
   colour, one hairline, and the term line in the label face.

   auto-fit with a min of 300px means the pair sits side by side on desktop and
   stacks on a phone without a media query. aspect-ratio holds the portrait
   crop so the two cards stay the same height even though the source images
   differ by two pixels. */
:is(.noselect, .jli-ms) .jlik-next {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 26px; margin-top: 46px;
}
:is(.noselect, .jli-ms) .jlik-next__card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius); background: var(--paper-card);
  border: 1px solid rgba(58,49,40,.1);
  transition: transform .4s var(--ease-out), border-color .3s;
}
:is(.noselect, .jli-ms) .jlik-next__art {
  background: var(--paper-photo);
  aspect-ratio: 900 / 1009; overflow: hidden;
}
:is(.noselect, .jli-ms) .jlik-next__art img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
:is(.noselect, .jli-ms) .jlik-next__body { padding: 26px 28px 30px; }
:is(.noselect, .jli-ms) .jlik-next__term {
  font-family: var(--font-label); font-size: 11.2px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px;
}
:is(.noselect, .jli-ms) .jlik-next__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(25.6px, 2vw, 30.4px); line-height: 1.12;
  color: var(--ink-main); margin: 0 0 8px; text-wrap: balance;
}
:is(.noselect, .jli-ms) .jlik-next__sub {
  font-size: 15.2px; line-height: 1.5; color: var(--ink-soft); margin: 0;
  max-width: 34ch;
}

@media (hover: hover) {
  :is(.noselect, .jli-ms) .jlik-next__card:hover {
    transform: translateY(-4px); border-color: rgba(58,49,40,.22);
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.noselect, .jli-ms) .jlik-next__card { transition: none; }
  :is(.noselect, .jli-ms) .jlik-next__card:hover { transform: none; }
}

:is(.noselect, .jli-ms) .jlik-faq { max-width: 820px; margin: 48px auto 0; }
:is(.noselect, .jli-ms) .jlik-faq__item { border-bottom: 1px solid rgba(58,49,40,.14); }
:is(.noselect, .jli-ms) .jlik-faq__q {
  width: 100%; display: flex; align-items: center; gap: 18px;
  padding: 22px 4px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 500; font-size: 19.52px;
  line-height: 1.32; color: var(--ink-main); transition: color .25s;
}
:is(.noselect, .jli-ms) .jlik-faq__q:hover { color: var(--green-deep); }
:is(.noselect, .jli-ms) .jlik-faq__sign { margin-left: auto; flex: 0 0 auto; position: relative; width: 18px; height: 18px; }
:is(.noselect, .jli-ms) .jlik-faq__sign::before,
:is(.noselect, .jli-ms) .jlik-faq__sign::after {
  content: ""; position: absolute; background: var(--green);
  transition: transform .35s var(--ease-out), opacity .25s;
}
:is(.noselect, .jli-ms) .jlik-faq__sign::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
:is(.noselect, .jli-ms) .jlik-faq__sign::after  { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); }
:is(.noselect, .jli-ms) .jlik-faq__item.is-open .jlik-faq__sign::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
:is(.noselect, .jli-ms) .jlik-faq__a {
  overflow: hidden; max-height: 0; opacity: 0; padding: 0 4px;
  transition: max-height .45s var(--ease-out), opacity .3s, padding .3s;
}
:is(.noselect, .jli-ms) .jlik-faq__item.is-open .jlik-faq__a { opacity: 1; padding: 0 4px 24px; }
:is(.noselect, .jli-ms) .jlik-faq__a p { color: var(--ink-soft); max-width: 68ch; }
:is(.noselect, .jli-ms) .jlik-faq__a a { color: var(--green-deep); text-decoration: underline; }

/* ---------- 15. Footer ---------- */
/* clear:both is load-bearing, not tidiness. ChabadOne's own stylesheet
   (w2.chabad.org/css/cco/minisites/global.css) has

       div#chabad_body_content { float: left; width: 975px; }

   and the guide's Appendix C puts FooterSection as that element's NEXT
   SIBLING. A normal-flow block placed beside a left float starts at the top
   of the float, not below it - so on a real install the footer painted its
   dark --ink-main ground straight over the hero, and the title and standfirst
   read as dark-on-dark. Clearing drops it past the floated content. */
:is(.noselect, .jli-ms) .FooterContainer,
:is(.noselect, .jli-ms) .ms-footer { clear: both; }
:is(.noselect, .jli-ms) .ms-footer { background: var(--ink-main); color: rgba(231,227,217,.8); padding: 72px 0 0; }
:is(.noselect, .jli-ms) .ms-footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; padding-bottom: 54px;
}
:is(.noselect, .jli-ms) .ms-footer__logo { height: 38px; width: auto; margin-bottom: 20px; }
:is(.noselect, .jli-ms) .ms-footer h4 {
  font-family: var(--font-label); font-size: 11.2px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ochre); margin-bottom: 18px;
}
:is(.noselect, .jli-ms) .ms-footer a:hover { color: #fff; }
:is(.noselect, .jli-ms) .ms-footer li + li { margin-top: 10px; }
:is(.noselect, .jli-ms) .ms-footer li { font-size: 16px; }
:is(.noselect, .jli-ms) .ms-footer__social { display: flex; gap: 10px; margin-top: 20px; }
/* A social link a centre has not set. These ship href="" and, unlike the
   register button's href (a href,innertext field, whose empty value the editor
   strips), the empty value survives - so without this the footer shows two
   icons that reload the page when tapped. Hidden until there is somewhere to
   go; :not([href]) covers it too in case the stripping behaviour differs. */
:is(.noselect, .jli-ms) .ms-footer__social a[href=""],
:is(.noselect, .jli-ms) .ms-footer__social a:not([href]) { display: none; }
/* Was an inline style attribute on the footer blurb. ChabadOne requires all
   CSS to live in the stylesheet, not inline, so it moved here. */
:is(.noselect, .jli-ms) .jlik-footer__blurb { font-size: 14.72px; max-width: 34ch; }
:is(.noselect, .jli-ms) .ms-footer__social a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(231,227,217,.24); transition: background .25s, border-color .25s;
}
:is(.noselect, .jli-ms) .ms-footer__social a:hover { background: var(--green); border-color: var(--green); }
:is(.noselect, .jli-ms) .ms-footer__social .jlik-ico { width: 16px; height: 16px; }
:is(.noselect, .jli-ms) .ms-footer__bar {
  border-top: 1px solid rgba(231,227,217,.14);
  padding: 22px 0 30px; font-size: 13.92px; color: rgba(231,227,217,.55);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
}

/* ---------- 16. Reveal + back to top ----------
   Gated behind .reveal-on, added by script.js only once it is running. Without
   the class nothing is hidden, so if the script never loads - a WYSIWYG editor
   stripping the script tag is a real possibility - the content still shows. */
:is(.noselect, .jli-ms).reveal-on [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
:is(.noselect, .jli-ms).reveal-on [data-reveal].is-in { opacity: 1; transform: none; }

:is(.noselect, .jli-ms) .jlik-to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 400;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink-main); color: var(--bg-base); border: 0; cursor: pointer;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .35s, visibility .35s, transform .35s var(--ease-out), background .25s;
}
:is(.noselect, .jli-ms) .jlik-to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
:is(.noselect, .jli-ms) .jlik-to-top:hover { background: var(--green); }
:is(.noselect, .jli-ms) .jlik-to-top .jlik-ico { width: 17px; height: 17px; }

:is(.noselect, .jli-ms) a:focus-visible,
:is(.noselect, .jli-ms) button:focus-visible,
:is(.noselect, .jli-ms) input:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ---------- 17. Responsive ---------- */
@media (max-width: 1080px) {
  :is(.noselect, .jli-ms) .jlik-counters { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  :is(.noselect, .jli-ms) .ms-footer__grid { grid-template-columns: 1fr 1fr; }
}
/* Below this there is not enough width to sit the artwork beside the text
   without crowding it - the copy column is a fixed 545px while the shell keeps
   shrinking, so the gap collapses. Stack instead of crowd. Must stay ABOVE the
   960px block, which overrides it to centre everything. */
@media (max-width: 1120px) {
  :is(.noselect, .jli-ms) .jlik-hero__copy { max-width: none; }
  /* relative, NOT static: .jlik-cg-piece is absolute with inset:0, so it resolves
     against the nearest POSITIONED ancestor. Made static, the layers sized
     themselves to the whole shell instead of the collage box and the artwork
     stretched badly on every mobile width. */
  :is(.noselect, .jli-ms) .jlik-collage {
    position: relative; width: 100%; max-width: 560px;
    right: auto; top: auto;
  }
  /* Artwork leads on narrow screens. The collage is a sibling of the title and
     the copy row, so ordering the shell as a flex column is enough to lift it
     above both without touching the markup (which matters - the blocks are
     pasted into ChabadOne by hand). */
  :is(.noselect, .jli-ms) .jlik-hero .jlik-shell { display: flex; flex-direction: column; }
  :is(.noselect, .jli-ms) .jlik-collage    { order: -1; margin: 0 auto 30px; }
  :is(.noselect, .jli-ms) .jlik-hero__title { order: 0; }
  :is(.noselect, .jli-ms) .jlik-hero__row   { order: 1; }
}

@media (max-width: 960px) {
  :is(.noselect, .jli-ms) .ms-nav, :is(.noselect, .jli-ms) .ms-header__cta { display: none; }
  :is(.noselect, .jli-ms) .ms-burger { display: grid; }

  :is(.noselect, .jli-ms) .jlik-band { padding: 54px 0; }
  :is(.noselect, .jli-ms) .jlik-hero { padding: 40px 0 56px; }
  /* Left-aligned, not centred. Centring the copy while the spec grid packs to
     the left put every value centred inside a left-packed cell, so nothing
     lined up. Left throughout matches the desktop treatment, and with the
     artwork leading the composition does not need the copy centred. */
  :is(.noselect, .jli-ms) .jlik-hero__copy { max-width: none; text-align: left; }
  /* The standfirst is the exception: centred, and pulled up tight under the
     lockup so it reads as the title's second line rather than a separate
     paragraph. The lockup's own bottom margin goes to zero and this margin-top
     is the whole gap. */
  :is(.noselect, .jli-ms) .jlik-hero__sub {
    margin: 26px auto 0; max-width: 27em; text-align: center;
  }
  :is(.noselect, .jli-ms) .jlik-hero .jlik-spec { margin-top: 34px; }
  :is(.noselect, .jli-ms) .jlik-hero .jlik-btn-row { justify-content: flex-start; }
  :is(.noselect, .jli-ms) .jlik-hero__lockup { max-width: none; margin: 0; }
  /* 2x2 with the label above the value and a hairline over each row. Four
     across only ever fitted because the values were abbreviated; spelled out
     ("90 minutes", "Tue, Oct 27") they need the width, and two rows give it.
     The gutter is a real column-gap, which is what makes each row's hairline
     STOP at its own column and start again at the next - one rule per fact
     rather than one rule across the pair. */
  :is(.noselect, .jli-ms) .jlik-spec {
    grid-template-columns: 1fr 1fr;
    justify-content: stretch; column-gap: 34px; row-gap: 0;
    text-align: left;
  }
  :is(.noselect, .jli-ms) .jlik-spec__cell {
    flex-direction: column;
    text-align: left; padding: 11px 0 15px;
    border-top: 1px solid rgba(58,49,40,.18);
  }
  /* undo the desktop vertical dividers */
  :is(.noselect, .jli-ms) .jlik-spec__cell + .jlik-spec__cell {
    margin-left: 0; padding-left: 0; border-left: 0;
  }
  :is(.noselect, .jli-ms) .jlik-spec__val { font-size: 16.96px; }
  :is(.noselect, .jli-ms) .jlik-spec__label {
    margin-top: 0; margin-bottom: 5px;
    font-size: 8.32px; letter-spacing: .17em;
  }
  /* No room to bleed on a phone - artwork leads instead. */
  :is(.noselect, .jli-ms) .jlik-collage {
    position: relative; width: 100%; max-width: 560px;
    margin: 0 auto 26px; right: auto; top: auto;
  }

  :is(.noselect, .jli-ms) .jlik-split, :is(.noselect, .jli-ms) .jlik-split--flip { flex-direction: column; gap: 42px; }
  :is(.noselect, .jli-ms) .jlik-teacher { flex-direction: column; text-align: center; gap: 30px; }
  :is(.noselect, .jli-ms) .jlik-teacher__photo { flex: none; width: 210px; }
  :is(.noselect, .jli-ms) .jlik-sec-head { max-width: none; }

  :is(.noselect, .jli-ms) .jlik-register__inner { flex-direction: column; align-items: flex-start; gap: 30px; padding: 40px 30px; }
  :is(.noselect, .jli-ms) .jlik-register__side { width: 100%; }
  :is(.noselect, .jli-ms) .jlik-register__side .jlik-btn { width: 100%; }
}
@media (max-width: 620px) {
  :is(.noselect, .jli-ms) .jlik-shell { padding: 0 18px; }
  :is(.noselect, .jli-ms) .jlik-band { padding: 46px 0; }
  :is(.noselect, .jli-ms) .jlik-hero__title .lg { font-size: clamp(32px, 11vw, 51.2px); }
  :is(.noselect, .jli-ms) .jlik-hero__title .sm { font-size: clamp(16px, 5vw, 22.4px); }
  :is(.noselect, .jli-ms) .jlik-counters { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  :is(.noselect, .jli-ms) .ms-footer__grid { grid-template-columns: 1fr; gap: 34px; }
  :is(.noselect, .jli-ms) .ms-brand__center { max-width: 124px; font-size: 9.92px; }
  :is(.noselect, .jli-ms) .jlik-btn-row .jlik-btn { width: 100%; }
  :is(.noselect, .jli-ms) .lessons { grid-template-columns: 1fr; }
  :is(.noselect, .jli-ms) .jlik-art-pair { padding: 0 0 36px 30px; }
}

/* ---------- 18. Motion + print ---------- */
@media (prefers-reduced-motion: reduce) {
  :is(.noselect, .jli-ms) *, :is(.noselect, .jli-ms) *::before, :is(.noselect, .jli-ms) *::after {
    animation-duration: .01ms !important; animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
  :is(.noselect, .jli-ms) .jlik-hero__title .wd { transform: none; }
  :is(.noselect, .jli-ms) .jlik-hero__sub, :is(.noselect, .jli-ms) .jlik-spec, :is(.noselect, .jli-ms) .jlik-hero .jlik-btn-row { opacity: 1; }
  :is(.noselect, .jli-ms) .jlik-cg-piece, :is(.noselect, .jli-ms) .jlik-cg-block { opacity: 1; }
  /* Reduced motion means no MOVEMENT, not no transition: an opacity change
     conveys nothing kinetic, so sections still arrive gently while the 24px
     translate is dropped. The !important beats the blanket
     transition-duration: .01ms at the top of this block; a more specific
     selector, so it wins cleanly. */
  :is(.noselect, .jli-ms).reveal-on [data-reveal] {
    transform: none !important;
    transition: opacity .45s linear !important;
  }
}
/* Short phones: the artwork can only shrink so far before it stops reading as
   an image, so on a low viewport the lesson type comes down a step too. Kept
   out of the main mobile block because it is height-driven, not width-driven -
   a landscape phone needs this and a portrait tablet does not. */
@media (max-width: 960px) and (max-height: 720px) {
  :is(.noselect, .jli-ms) .jlik-story.jlik-story--swipe .jlik-story__num { font-size: 27.2px; }
  :is(.noselect, .jli-ms) .jlik-story.jlik-story--swipe .jlik-story__title { font-size: 20.8px; }
  :is(.noselect, .jli-ms) .jlik-story.jlik-story--swipe .jlik-story__text { font-size: 15.2px; margin-top: 10px; }
  :is(.noselect, .jli-ms) .jlik-story.jlik-story--swipe .jlik-story__step { margin-top: 14px; }
  :is(.noselect, .jli-ms) .jlik-story.jlik-story--swipe .jlik-story__rule { margin-top: 14px; }
}

@media print {
  :is(.noselect, .jli-ms) .ms-header, :is(.noselect, .jli-ms) .jlik-to-top, :is(.noselect, .jli-ms) .jlik-hero__wash { display: none !important; }
  :is(.noselect, .jli-ms) .jlik-band { padding: 24px 0; }
  :is(.noselect, .jli-ms) .jlik-cg-piece, :is(.noselect, .jli-ms) .jlik-cg-block { opacity: 1 !important; }
  :is(.noselect, .jli-ms).reveal-on [data-reveal] { opacity: 1 !important; transform: none !important; }
  :is(.noselect, .jli-ms) .jlik-band--ink, :is(.noselect, .jli-ms) .jlik-register__inner { background: #fff !important; color: #000 !important; }
}

/* ---------- Icons ----------
   Inline <svg> is not usable here: ChabadOne strips <path>, so every
   icon arrived as an empty box. These are masks instead - the markup is
   a bare <span>, which survives, and the artwork lives in CSS, which is
   not sanitised. background:currentColor keeps them colour-aware. */
:is(.noselect, .jli-ms) .jlik-ico {
  display: block; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}
:is(.noselect, .jli-ms) .jlik-ico--arrow-down {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='jlik-btn__arrow' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E %3Cpath d='M12 5v14M5 12l7 7 7-7'%3E%3C/path%3E %3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='jlik-btn__arrow' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E %3Cpath d='M12 5v14M5 12l7 7 7-7'%3E%3C/path%3E %3C/svg%3E");
}
:is(.noselect, .jli-ms) .jlik-ico--book {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E %3Cpath d='M4 5h11a4 4 0 0 1 4 4v11H8a4 4 0 0 1-4-4z'%3E%3C/path%3E %3Cpath d='M4 5a2 2 0 0 1 2-2h9M8 9h7M8 13h7'%3E%3C/path%3E %3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E %3Cpath d='M4 5h11a4 4 0 0 1 4 4v11H8a4 4 0 0 1-4-4z'%3E%3C/path%3E %3Cpath d='M4 5a2 2 0 0 1 2-2h9M8 9h7M8 13h7'%3E%3C/path%3E %3C/svg%3E");
}
:is(.noselect, .jli-ms) .jlik-ico--pin {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E %3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'%3E%3C/path%3E %3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E %3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E %3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'%3E%3C/path%3E %3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E %3C/svg%3E");
}
:is(.noselect, .jli-ms) .jlik-ico--clock {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E %3Ccircle cx='12' cy='12' r='9'%3E%3C/circle%3E %3Cpath d='M12 7v5l3.5 2'%3E%3C/path%3E %3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E %3Ccircle cx='12' cy='12' r='9'%3E%3C/circle%3E %3Cpath d='M12 7v5l3.5 2'%3E%3C/path%3E %3C/svg%3E");
}
:is(.noselect, .jli-ms) .jlik-ico--calendar {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E %3Crect x='3' y='4' width='18' height='17' rx='2'%3E%3C/rect%3E %3Cpath d='M3 9h18M8 2v4M16 2v4'%3E%3C/path%3E %3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E %3Crect x='3' y='4' width='18' height='17' rx='2'%3E%3C/rect%3E %3Cpath d='M3 9h18M8 2v4M16 2v4'%3E%3C/path%3E %3C/svg%3E");
}
:is(.noselect, .jli-ms) .jlik-ico--arrow-up {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E %3Cpath d='M12 19V5M5 12l7-7 7 7'%3E%3C/path%3E %3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E %3Cpath d='M12 19V5M5 12l7-7 7 7'%3E%3C/path%3E %3C/svg%3E");
}
:is(.noselect, .jli-ms) .jlik-ico--instagram {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' aria-hidden='true'%3E %3Crect x='3.5' y='3.5' width='17' height='17' rx='5'%3E%3C/rect%3E %3Ccircle cx='12' cy='12' r='3.6'%3E%3C/circle%3E %3Cpath d='M17.2 6.9h.01'%3E%3C/path%3E %3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' aria-hidden='true'%3E %3Crect x='3.5' y='3.5' width='17' height='17' rx='5'%3E%3C/rect%3E %3Ccircle cx='12' cy='12' r='3.6'%3E%3C/circle%3E %3Cpath d='M17.2 6.9h.01'%3E%3C/path%3E %3C/svg%3E");
}
:is(.noselect, .jli-ms) .jlik-ico--facebook {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' aria-hidden='true'%3E %3Cpath d='M13.5 22v-8h2.7l.4-3.1h-3.1V8.9c0-.9.25-1.5 1.55-1.5h1.65V4.6c-.3 0-1.3-.1-2.45-.1-2.4 0-4.05 1.5-4.05 4.2v2.2H7.5V14h2.2v8z'/%3E %3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' aria-hidden='true'%3E %3Cpath d='M13.5 22v-8h2.7l.4-3.1h-3.1V8.9c0-.9.25-1.5 1.55-1.5h1.65V4.6c-.3 0-1.3-.1-2.45-.1-2.4 0-4.05 1.5-4.05 4.2v2.2H7.5V14h2.2v8z'/%3E %3C/svg%3E");
}