/* ============================================================================
   XXVI — V15 (task 064). What V15 adds to V14, and nothing else:

   1. THE PLATFORM, the section after the Results film: the system screens
      joined by one thin thread (EXPLORATION_17 / 01 Filament Direction), with
      the FINAL pictures. The thread is drawn by the scroll and withdraws on
      the way up.
   2. THE CLOSING, two versions (?end=k1 | k5): the thread runs on out of the
      last screen and lands in the closing. K1 · the meridian: the thread is
      the meridian, it comes down the middle and a point lands where it stops.
      K5 · the iris: the thread lands in the centre and an iris closes on it.
      Only the sentence; nothing else on the screen.
   3. THE MENU, two versions (?menu=n3 | n6): SITE_OPTIONS_4 N3 (the orbit)
      and N6 (the night sky), six chapters (V16: in the end edge).
   4. THE WHATSAPP MARK W2 of SITE_OPTIONS_3, in the other bottom corner.
   V16 (task 065): seven screens with one-line names; the menu is dots only
   and on the end edge; W2 on the start edge (the two swap sides).
   V17 (task 067), the final version: one menu (N6) and one closing (K1);
   the N3 and K5 rules stay below, not reachable (v15.js). Each caption sits
   on its own picture's side in Hebrew too; W2 larger and on whole pixels;
   the line at the very bottom (footer.endline).
   Task 068: W2 in the bottom row's end corner, always shown; the menu N6
   back on the start edge, clear of the page's dots.
   Task 069: the page's own dots stand on BOTH side edges (the list marks
   on the start edge, the thread's nodes on both), so the menu leaves the
   edges: BC, a quiet row of six points at the bottom centre, on desktop
   and phone, level with W2 and always there (it never moves, hides or
   jumps). The N6 and N3 rules stay below, not reachable (v15.js).

   The state the menu and W2 read is written on <html> by v15.js:
   nv-open | nv-moving | nv-film | nv-scr | nv-end, nv-up, nv-idle, and the
   numbers --p (the page), --fp (the film or the thread), --q.
   SITE_OPTIONS_4 drew them inside a frame (.fr.st-film, .fr.ph, cqw, --sat);
   here the same rules are written for the page itself (html.nv-film, the
   phone width 820 px of this site, vw, env(safe-area-inset-*)).
   ========================================================================== */

:root{
  --champ-hi:#E3CBA0;
  --e15:cubic-bezier(.16,.84,.28,1);
  --t15:520ms;
  --sat15:env(safe-area-inset-top,0px);
  --sab15:env(safe-area-inset-bottom,0px);
}

/* ---------- the masthead comes back once the Results film has gone --------
   V14 hid the masthead's mark from the Optimization film on, and sent its
   EN/HE up with the Results film; past that film the page ended. Now the
   platform and the closing follow, so the masthead returns there, whole. */
html.v15-after{ --chrome:1 !important; }
html.v15-after .chrome .langs{ translate:none !important; animation:v15in .6s var(--e15) both; }
html.v15-after .chrome .mark{ transition:opacity .6s var(--e15); }
@keyframes v15in{ from{ opacity:0; } to{ opacity:1; } }
/* the closing is the last screen: V14's footer (only its XXVI mark was left,
   site.css) would stand under the sentence, so V15 does not show it */
footer.sysfoot{ display:none; }

/* ============================================================ THE PLATFORM */
.fil-wrap{ position:relative; background:var(--ground); }
.fil-wrap .wire{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:visible; }
.fil-wrap .wire path{ fill:none; stroke:#2C3038; stroke-width:1; }
.fil-wrap .wire path.lead{ stroke:var(--champ); }

.screens{ position:relative; z-index:1;
  padding:clamp(120px,18vh,190px) clamp(30px,4.4vw,86px) clamp(60px,10vh,120px);
  padding-inline-start:max(84px,4.4vw); }
.screens .file{ display:flex; flex-direction:column; }
.screens .spec{ position:relative; padding-block:58px; opacity:0; will-change:opacity; }
.screens .v-plate{ position:relative; background:#050608; border:1px solid var(--line-2); will-change:transform; }
.screens .v-plate img{ display:block; width:100%; height:auto; }
.screens .spec.r .v-plate{ margin-inline-start:auto; }
.screens .node{ position:absolute; inset-block-start:28px; width:11px; height:11px; border-radius:50%;
  border:1px solid #40454E; background:var(--ground); z-index:2; transition:border-color .5s, box-shadow .5s; }
.screens .spec.cur .node{ border-color:var(--champ); box-shadow:0 0 0 3px rgba(201,168,118,.14); }

/* the plate's registration ticks (screens.css of EXPLORATION_17) */
.screens .tick{ position:absolute; width:9px; height:9px; z-index:2; pointer-events:none; }
.screens .tick:before,.screens .tick:after{ content:""; position:absolute; background:#40454E; transition:background .5s; }
.screens .tick.tl{ inset-inline-start:-1px; inset-block-start:-1px; }
.screens .tick.tl:before{ width:9px; height:1px; inset-inline-start:0; inset-block-start:0; }
.screens .tick.tl:after{ width:1px; height:9px; inset-inline-start:0; inset-block-start:0; }
.screens .tick.br{ inset-inline-end:-1px; inset-block-end:-1px; }
.screens .tick.br:before{ width:9px; height:1px; inset-inline-end:0; inset-block-end:0; }
.screens .tick.br:after{ width:1px; height:9px; inset-inline-end:0; inset-block-end:0; }
.screens .spec.cur .tick:before,.screens .spec.cur .tick:after{ background:var(--champ); }

/* the caption: one line, the picture's name (V16: no category line; the
   same words and the same LTR look in English and Hebrew). V17: the name
   hugs its own text, so it stands at its picture's edge: the start edge for
   a start-side picture, the end edge for an end-side one, in both languages
   (in V16 the LTR name stretched across the column and read from the left) */
.screens .v-cap{ display:flex; flex-direction:column; align-items:flex-start; margin-block-end:14px; }
.screens .spec.r .v-cap{ align-items:flex-end; }
.screens .v-cap .nm{ font-size:17px; font-weight:400; letter-spacing:-.02em; color:#4B515B; line-height:1.2; transition:color .5s; }
.screens .spec.lit .v-cap .nm{ color:var(--ink); }
.screens .spec.cur .v-cap .nm{ color:var(--champ); }

@media (max-width:820px){
  .screens{ padding:110px 26px 60px; }
  .screens .spec{ padding-block:40px; }
  .screens .node{ inset-block-start:16px; width:9px; height:9px; }
  .screens .v-cap .nm{ font-size:15px; }
}

/* ============================================================ THE CLOSING */
.closing{ position:relative; z-index:1; height:100vh; overflow:hidden; }
@supports (height:100svh){ .closing{ height:100svh; } }
.closing .kx{ position:absolute; inset:0; }
.closing .ks{ position:absolute; inset-inline:0; margin:0 auto; padding:0 26px; box-sizing:border-box;
  font-weight:400; font-size:clamp(22px,2.6vw,35px); line-height:1.22; letter-spacing:-.025em;
  color:var(--ink); max-width:20em; text-align:center; text-wrap:balance; }
html[dir="rtl"] .closing .ks{ letter-spacing:-.005em; line-height:1.34 !important; }
@media (max-width:820px){ .closing .ks{ font-size:21px; max-width:15em; } }
.closing .rv{ opacity:0; transform:translateY(10px); transition:opacity 1.4s var(--e15) var(--d,0ms), transform 1.4s var(--e15) var(--d,0ms); }
.closing.landed .rv{ opacity:1; transform:none; }

/* the landing point, both versions */
.closing .pt{ position:absolute; left:50%; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%;
  background:var(--champ-hi); opacity:0;
  box-shadow:0 0 12px 2px rgba(201,168,118,.4), 0 0 40px 8px rgba(201,168,118,.12); }

/* K1 · the meridian. The thread is the meridian: it comes down the middle
   from the top edge of the closing and stops at 34%; there the point lands
   and sends one soft ring out. Then the sentence. */
.closing.k1 .pt{ top:34%; transition:opacity .9s var(--e15); }
.closing.k1 .pt:after{ content:""; position:absolute; inset:-2px; border-radius:50%; border:1px solid var(--champ-line); opacity:0; }
.closing.k1.landed .pt{ opacity:1; }
.closing.k1.landed .pt:after{ animation:k1r 2.6s cubic-bezier(.2,.6,.3,1) .25s 1 both; }
@keyframes k1r{ 0%{ opacity:.9; transform:scale(1); } 100%{ opacity:0; transform:scale(11); } }
.closing.k1 .ks{ top:calc(34% + 46px); --d:1100ms; }
@media (max-width:820px){ .closing.k1 .pt{ top:30%; } .closing.k1 .ks{ top:calc(30% + 40px); } }

/* K5 · the iris. As old films end: a fine gold ring wider than the screen,
   and a second one a beat behind it, close on the point where the thread
   landed, until both are a small lens around it. Then the sentence. */
.closing.k5 .ir{ position:absolute; left:50%; top:38%; width:max(112vw,900px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(201,168,118,.30); transform:translate(-50%,-50%);
  transition:width 3.4s cubic-bezier(.62,0,.22,1) .15s, border-color 1.4s var(--e15) 2.6s; }
.closing.k5 .i2{ width:max(140vw,1100px); border-color:rgba(233,234,237,.08); transition-delay:.55s, 2.8s; }
.closing.k5.landed .ir{ width:18px; border-color:var(--champ-line); }
.closing.k5.landed .i2{ width:40px; border-color:rgba(201,168,118,.14); }
.closing.k5 .pt{ top:38%; width:4px; height:4px; margin:-2px 0 0 -2px; transition:opacity .9s var(--e15); }
.closing.k5.landed .pt{ opacity:1; }
.closing.k5 .ks{ top:calc(38% + 54px); --d:3300ms; }
@media (max-width:820px){
  .closing.k5 .ir{ width:220vw; } .closing.k5 .i2{ width:260vw; }
  .closing.k5 .ir,.closing.k5 .pt{ top:34%; } .closing.k5 .ks{ top:calc(34% + 46px); }
}

/* ============================================================ THE MENU (N3 · N6)
   V16 (task 065), the same two menus with two corrections:
   - dots only: no names or numbers beside the points (the chapter names are
     the points' accessible names, v15.js), and finer and quieter points;
   - the END edge. The page's own dots, the ring markers of the system list,
     stand on the start edge in both languages (left in English, right in
     Hebrew), and the V15 menu stood on them. The menu and W2 swap sides, so
     the menu is on the right in English and on the left in Hebrew.
   V17 (task 068): W2 takes the end corner of the bottom row, so the menu is
   on the start edge again, now as fine dots only: in a narrow lane outside
   the list marks on desktop (at 1440 the dots end at x 46, the marks begin
   at 63), and on the phone one row in the bottom band, level with W2,
   beginning past the marks' lane (64 px in). */
.nb{ position:fixed; inset:0; z-index:105; pointer-events:none; }
.nb .cn{ position:absolute; z-index:1; pointer-events:auto; }
.nb .cn a{ outline:0; color:inherit; text-decoration:none; }
.nb .cn a:focus-visible i{ box-shadow:0 0 0 1px var(--champ-line); }

/* the column (N6): M3's place and movement, on the start edge (task 068) */
.col .cn{ inset-inline-start:clamp(16px,1.6vw,24px); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:flex-start; gap:24px;
  transition:gap .9s var(--e15), top .9s var(--e15), transform .9s var(--e15), opacity .6s var(--e15); }
.col .cn a{ position:relative; display:flex; align-items:center; height:11px; }
.col .cn a i{ display:block; position:relative; width:11px; height:11px; flex:none; border-radius:50%; }
html.nv-film .col .cn,html.nv-scr .col .cn,html.nv-end .col .cn{ gap:6px; top:100%; transform:translateY(calc(-100% - 36px)); opacity:.7; }
html.nv-film .col .cn:hover,html.nv-scr .col .cn:hover,html.nv-end .col .cn:hover{ opacity:1; }
html.nv-film .col .cn a.cur i:after,html.nv-scr .col .cn a.cur i:after,html.nv-end .col .cn a.cur i:after{
  animation:none; opacity:1; transform:none; inset:-5px; border:0;
  background:conic-gradient(rgba(201,168,118,.8) calc(var(--fp,0) * 360deg),rgba(233,234,237,.10) 0);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 1px),#000 calc(100% - .8px));
  mask:radial-gradient(closest-side,transparent calc(100% - 1px),#000 calc(100% - .8px)); }
@media (max-width:820px){
  /* the row's dots stand level with W2's glyph (both centred 22 px over the
     bottom), and the row begins past the lane of the list marks (x 26-53),
     which stay lit down to the bottom edge on the phone */
  .col .cn{ inset-inline-start:64px; top:calc(100% - var(--sab15) - 28px); transform:none; flex-direction:row; align-items:center; gap:18px; }
  .col .cn a{ padding:16px 11px; margin:-16px -11px; }
  html.nv-film .col .cn{ top:calc(var(--sat15) + 66px); transform:scale(.8); transform-origin:left top; opacity:.6; gap:14px; }
  html[dir="rtl"].nv-film .col .cn{ transform-origin:right top; }
  html.nv-scr .col .cn,html.nv-end .col .cn{ top:calc(100% - var(--sab15) - 28px); transform:scale(.8); transform-origin:left center; opacity:.6; gap:14px; }
  html[dir="rtl"].nv-scr .col .cn,html[dir="rtl"].nv-end .col .cn{ transform-origin:right center; }
}

/* N6 · the night sky: the stars step in from the edge (the start edge, task 068) */
.n6 .cn{ --k:1; }
.n6 .cn a{ margin-inline-start:calc(var(--o) * var(--k) * 1px); transition:margin .9s var(--e15), translate .9s var(--e15); }
.n6 .cn a i:before{ content:""; position:absolute; left:50%; top:50%; width:calc(var(--m) * .78px); height:calc(var(--m) * .78px); transform:translate(-50%,-50%);
  border-radius:50%; background:var(--ink-3);
  animation:n6t calc(var(--w) * 1s) ease-in-out calc(var(--dl) * -1s) infinite;
  transition:background .6s, width .5s var(--e15), height .5s var(--e15), box-shadow .5s; }
@keyframes n6t{ 0%,100%{ opacity:.25; } 50%{ opacity:.75; } }
.n6 .cn a.past i:before{ background:var(--champ-deep); }
.n6 .cn a.cur i:before{ width:4px; height:4px; background:var(--champ-hi); animation:none; opacity:.95;
  box-shadow:0 0 8px 2px rgba(201,168,118,.22), 0 0 20px 4px rgba(201,168,118,.06); }
.n6 .cn a i:after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid rgba(201,168,118,.18); opacity:0; transform:scale(.5);
  transition:opacity .5s, transform .6s var(--e15); }
.n6 .cn a.cur i:after{ opacity:1; transform:none; }
html.nv-film .n6 .cn,html.nv-scr .n6 .cn,html.nv-end .n6 .cn{ --k:.4; }
html.nv-film .n6 .cn a i:before,html.nv-scr .n6 .cn a i:before,html.nv-end .n6 .cn a i:before{ animation:none; opacity:.65; }
html.nv-film .n6 .cn a.cur i:before,html.nv-scr .n6 .cn a.cur i:before,html.nv-end .n6 .cn a.cur i:before{ opacity:.95; }
@media (max-width:820px){
  .n6 .cn a{ margin-inline-start:-11px; translate:0 calc(var(--y) * 1px); }
  html.nv-film .n6 .cn a,html.nv-scr .n6 .cn a,html.nv-end .n6 .cn a{ translate:0 0; }
}

/* N3 · the orbit: six points on a wide shallow arc out of the end edge;
   compact, a small ring of six whose hairline ring fills */
.n3 .cn{ --f:0; inset-inline-end:clamp(14px,2.4vw,30px); top:50%; width:70px; height:241px; transform:translateY(-50%);
  transition:top .9s var(--e15), transform .9s var(--e15), opacity .6s var(--e15); }
/* the arc is drawn out of the start edge of its box (x = 0 at the edge), so
   on the end edge it is mirrored in English, and in Hebrew it is not */
.n3 svg{ position:absolute; inset-inline-end:0; top:0; overflow:visible; transform:scaleX(-1); transition:opacity .6s var(--e15); }
html[dir="rtl"] .n3 svg{ transform:none; }
.n3 svg.p{ display:none; }
.n3 path{ fill:none; stroke-width:1; vector-effect:non-scaling-stroke; }
.n3 .bk{ stroke:var(--line-2); stroke-opacity:.7; }
.n3 .gd{ stroke:var(--champ); stroke-opacity:.7; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--p,0)); transition:stroke-dashoffset .3s linear; }
.n3 .cn a{ position:absolute; inset-inline-end:calc((var(--x) * (1 - var(--f)) + var(--fx) * var(--f)) * 1px - 5.5px);
  top:calc((var(--y) * (1 - var(--f)) + var(--fy) * var(--f)) * 1px - 5.5px);
  display:flex; align-items:center; height:11px; transition:inset-inline-end .9s var(--e15), top .9s var(--e15); }
.n3 .cn a i{ display:block; position:relative; width:11px; height:11px; flex:none; border-radius:50%; }
.n3 .cn a i:before{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--ink-3); opacity:.75; transition:all .5s var(--e15); }
.n3 .cn a.past i:before{ background:var(--champ-deep); }
.n3 .cn a.cur i:before{ inset:3.5px; background:var(--champ-hi); opacity:.95; box-shadow:0 0 7px 1px rgba(201,168,118,.25); }
.n3 .cn a i:after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid rgba(201,168,118,.28); opacity:0; transform:scale(.5);
  transition:opacity .5s, transform .6s var(--e15); }
.n3 .cn a.cur i:after{ opacity:1; transform:none; }
.n3 .rg{ position:absolute; inset-inline-end:-5px; top:-5px; width:36px; height:36px; border-radius:50%; opacity:0; transform:scale(.6);
  transition:opacity .6s var(--e15), transform .9s var(--e15); pointer-events:none;
  background:conic-gradient(rgba(201,168,118,.8) calc(var(--fp,0) * 360deg),rgba(233,234,237,.10) 0);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 1px),#000 calc(100% - .8px));
  mask:radial-gradient(closest-side,transparent calc(100% - 1px),#000 calc(100% - .8px)); }
html.nv-film .n3 .cn,html.nv-scr .n3 .cn,html.nv-end .n3 .cn{ --f:1; top:100%; transform:translateY(calc(-26px - 40px)); opacity:.75; }
html.nv-film .n3 svg,html.nv-scr .n3 svg,html.nv-end .n3 svg{ opacity:0; }
html.nv-film .n3 .rg,html.nv-scr .n3 .rg,html.nv-end .n3 .rg{ opacity:1; transform:none; }
html.nv-film .n3 .cn a i:before,html.nv-scr .n3 .cn a i:before,html.nv-end .n3 .cn a i:before{ inset:4.5px; }
html.nv-film .n3 .cn a.cur i:before,html.nv-scr .n3 .cn a.cur i:before,html.nv-end .n3 .cn a.cur i:before{ inset:3.5px; }
html.nv-film .n3 .cn a.cur i:after,html.nv-scr .n3 .cn a.cur i:after,html.nv-end .n3 .cn a.cur i:after{ opacity:0; }
@media (max-width:820px){
  .n3 .cn{ inset-inline-end:16px; top:calc(100% - var(--sab15) - 14px - 166px); width:166px; height:166px; transform:none; }
  .n3 svg.d{ display:none; } .n3 svg.p{ display:block; }
  .n3 .cn a{ inset-inline-end:calc((var(--px) * (1 - var(--f)) + var(--fx) * var(--f)) * 1px - 5.5px);
    top:calc((var(--py) * (1 - var(--f)) + var(--fy) * var(--f)) * 1px - 5.5px); padding:16px; margin:-16px; }
  html.nv-film .n3 .cn{ top:calc(var(--sat15) + 70px); transform:none; opacity:.65; }
  html.nv-film .n3 .rg{ transform:scale(.9); }
  html.nv-scr .n3 .cn,html.nv-end .n3 .cn{ top:calc(100% - var(--sab15) - 14px - 34px); transform:none; opacity:.65; }
  html.nv-scr .n3 .rg,html.nv-end .n3 .rg{ transform:scale(.9); }
}

/* ============================================================ BC · the bottom-centre row (task 069)
   Six points in one row at the bottom centre, their centres level with W2's
   glyph, clear of the page's dots on both edges and of W2. What they do,
   quietly: a hairline joins them and is drawn from the first point up to
   the current one as the page scrolls (--mp, v15.js); the current point is
   larger and lit, and its ring fills through its chapter (--cf); on a new
   chapter, or while the mouse rests on a point, the chapter's word shows
   above the row for a moment and fades (.wd). Everything moves by fades
   and by the scrolling; nothing appears or goes at once. In Hebrew the row
   runs from the right, so chapter 01 is on the start side in both.
   The gap between the points is as wide as the screen allows next to W2
   (1 px at 375, 4 at 390, 10 from 420), so W2's word and its longest line
   always keep at least 8 px. On the phone a soft ground fade (.sh) lies
   under the row and W2 (it goes softly while a film is up, where the film
   has its own ground and its note must read whole). */
.bc .cn{ position:absolute; left:50%; bottom:calc(var(--sab15) + 16px); translate:-50% 0; display:flex; align-items:center;
  gap:clamp(1px, calc((100vw - 370px) / 5), 10px); height:11px; }
/* each point is a 12 x 44 px target (the page counts borders in), its 11 px mark at the row's height */
.bc .cn a{ position:relative; display:block; flex:none; width:12px; height:44px; margin:-16.5px 0; }
.bc .cn a i{ position:absolute; left:0; top:16.5px; width:12px; height:11px; }
/* task 004 (I4): the mark is 5 px, scaled .6 (3 px) and grown to 1 by `scale`, not by width and height; its glow is
   a:after, faded by opacity instead of a box-shadow transition. The same sizes, colours and times as before. */
.bc .cn a i:before{ content:""; position:absolute; left:50%; top:50%; width:5px; height:5px; translate:-50% -50%; scale:.6; border-radius:50%;
  background:var(--ink-3); opacity:.8; transition:background .6s, scale .5s var(--e15), opacity .6s; }
.bc .cn a.past i:before{ background:var(--champ-deep); opacity:.9; }
.bc .cn a.cur i:before{ scale:1; background:var(--champ-hi); opacity:1; }
.bc .cn a:after{ content:""; position:absolute; left:50%; top:22px; width:5px; height:5px; translate:-50% -50%; border-radius:50%; pointer-events:none;
  box-shadow:0 0 8px 2px rgba(201,168,118,.22), 0 0 18px 4px rgba(201,168,118,.06); opacity:0; transition:opacity .6s; }
.bc .cn a.cur:after{ opacity:1; }
@media (hover:hover) and (pointer:fine){ .bc .cn a:hover i:before{ opacity:1; background:var(--champ); } }   /* task 004 (I6) */
/* task 004 (I3, I19): the touched point lights at once (v15.js sets .tap on pointerdown) */
.bc .cn a.tap i:before{ scale:1; background:var(--champ-hi); opacity:1; transition-duration:.12s; }
.bc .cn a i:after{ content:""; position:absolute; left:50%; top:50%; width:17px; height:17px; translate:-50% -50%; border-radius:50%;
  opacity:0; scale:.5; transition:opacity .5s, scale .6s var(--e15);
  background:conic-gradient(rgba(201,168,118,.8) calc(var(--cf,0) * 360deg),rgba(233,234,237,.12) 0);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 1px),#000 calc(100% - .8px));
  mask:radial-gradient(closest-side,transparent calc(100% - 1px),#000 calc(100% - .8px)); }
.bc .cn a.cur i:after{ opacity:1; scale:1; }
/* the hairline, from the first point's centre to the last one's */
.bc .rl{ position:absolute; inset-inline:6px; top:5px; height:1px; background:rgba(42,47,57,.9); pointer-events:none; }
.bc .rl i{ position:absolute; inset:0; transform-origin:left center; scale:var(--mp,0) 1;
  background:linear-gradient(90deg,rgba(201,168,118,.22),rgba(201,168,118,.62)); transition:scale .3s linear; }
html[dir="rtl"] .bc .rl i{ transform-origin:right center; background:linear-gradient(-90deg,rgba(201,168,118,.22),rgba(201,168,118,.62)); }
/* the chapter's word, above the row's centre */
.bc .wd{ position:absolute; left:50%; bottom:calc(100% + 20px); translate:-50% 3px; padding-inline-start:.26em;
  font:500 9.5px/12px var(--mono); letter-spacing:.26em; text-transform:uppercase; white-space:nowrap; color:var(--champ);
  opacity:0; transition:opacity .6s var(--e15), translate .6s var(--e15); pointer-events:none; }
.bc .wd.on{ opacity:.85; translate:-50% 0; }
/* task 075: on the phone the word goes at once when a film comes up (v15.js); no transition, so a fade already
   running is cut too (a new duration would not stop it) */
.bc .wd.quick075{ transition:none; }
/* a soft patch of ground behind the word, so it reads calmly over the page's text */
.bc .wd{ background:rgba(8,9,11,.72); box-shadow:0 0 10px 6px rgba(8,9,11,.72); border-radius:3px; }
html[dir="rtl"] .bc .wd{ font-family:inherit; font-size:11.5px; line-height:13px; letter-spacing:.04em; padding-inline-start:0; }
/* the phone's shelf */
.bc .sh{ display:none; }
@media (max-width:820px){
  .bc .sh{ display:block; position:absolute; left:0; right:0; bottom:0; height:calc(56px + var(--sab15)); pointer-events:none;
    background:linear-gradient(to top,rgba(8,9,11,.85),rgba(8,9,11,.62) 40%,rgba(8,9,11,.22) 75%,rgba(8,9,11,0));
    transition:opacity .6s var(--e15); }
  html.nv-film .bc .sh{ opacity:0; }
}

/* ============================================================ W2 · the WhatsApp mark
   SITE_OPTIONS_3 W2. V17 (task 068), on David's question: W2 lives in the
   END corner of the bottom row (right in English, left in Hebrew), the place
   it takes in the line at the very bottom, and it is there all the time:
   the glyph in the corner, the word and the line running in towards the
   page. It no longer steps aside, dims or hides in any state (the end edge
   has none of the page's own dots in that band; the list marks stand on the
   start edge, and the thread's nodes on the end edge are still unlit there).
   The line goes out and back with the scrolling (--wq, v15.js: one swing
   per 0.8 screen), the same on desktop and phone, in both languages.
   Whole pixels (task 067): the 44 px box stands on the screen's bottom edge,
   the 22 px glyph and the 1 px line centred in it. When the bottom line
   arrives it slides in under W2, which then stands in its own slot there. */
.wa{ position:fixed; z-index:105; inset-inline-end:36px; bottom:var(--sab15); color:var(--champ); outline:0;
  display:flex; align-items:center; flex-direction:row-reverse; height:44px; min-width:44px; gap:12px; text-decoration:none;
  transition:color .4s; }
.wa svg{ display:block; flex:none; }
.wa svg path{ fill:none; stroke:currentColor; stroke-width:1.4px; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; shape-rendering:geometricPrecision; }
@media (min-resolution:2dppx){ .wa svg path{ stroke-width:1.5px; } }
.wa .wtx{ font:500 11px/12px var(--mono); letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; color:var(--ink-2); transition:color .4s; }
html[dir="rtl"] .wa .wtx{ letter-spacing:.04em; font-size:12px; line-height:14px; }
/* the line: out and back with the scrolling, 12 to 48 px (phone 12 to 36) */
/* task 004 (I4): the line has a fixed length and is drawn out by `scale` from its end next to the word, so the
   scrolling no longer changes a width (layout). It stands where the flex row put it: 12 px before the word, at
   the box's 22nd pixel row. */
.wa .wln{ position:absolute; top:22px; inset-inline-end:calc(100% + 12px); display:block; height:1px; width:48px;
  transform-origin:right center; scale:calc((12 + var(--wq,.5) * 36) / 48) 1;
  background:linear-gradient(90deg,transparent,var(--champ)); transition:scale .18s linear; }
html[dir="rtl"] .wa .wln{ transform-origin:left center; background:linear-gradient(-90deg,transparent,var(--champ)); }
.wa:focus-visible .wtx{ color:var(--ink); }
@media (hover:hover) and (pointer:fine){ .wa:hover .wtx{ color:var(--ink); } }   /* task 004 (I6) */
.wa:focus-visible{ box-shadow:0 0 0 1px var(--champ-line); }
@media (max-width:1199px){ .wa{ inset-inline-end:28px; } }
@media (max-width:820px){
  .wa{ inset-inline-end:16px; }
  .wa .wln{ width:36px; scale:calc((12 + var(--wq,.5) * 24) / 36) 1; }
}
/* task 004 (I1): under 375 px the line is shorter (12 to 20 px), so it keeps clear of the menu row */
@media (max-width:374px){
  .wa .wln{ width:20px; scale:calc((12 + var(--wq,.5) * 8) / 20) 1; }
}
/* task 004 (I1): under 340 px even that runs into the row in English, so the word goes (its name stays in the link's
   aria-label); the glyph keeps its corner and the line starts 12 px from it */
@media (max-width:339px){
  .wa .wtx{ display:none; }
  .wa .wln{ inset-inline-end:calc(100% - 10px); }
}

/* ============================================================ THE BOTTOM LINE (V17)
   About one centimetre, under the closing's full screen: the XXVI mark at the
   start edge with the sentence beside it, and at the end edge W2's slot (W2
   itself is fixed and lands there, so at the very bottom the two read as one
   row). On the phone the sentence takes its own line(s) above, and the mark
   and W2 share the last line. In Hebrew the row mirrors. Task 068: the mark
   and the sentence a step brighter and larger (#8A909B on the ground, 6.2:1). The
   menu (task 069: the bottom-centre row) is lifted over the part on screen
   (--lift). Task 069: 28 px more ground above it, at the end of the closing
   screen, so the landing breathes before the footer. */
.fil-wrap{ padding-block-end:28px; }
.endline{ position:relative; z-index:1; display:flex; align-items:center; justify-content:flex-start; gap:22px;
  box-sizing:border-box; min-height:calc(44px + var(--sab15)); padding:0 240px var(--sab15) 36px;
  background:var(--ground); border-block-start:1px solid var(--line); }
html[dir="rtl"] .endline{ padding:0 36px var(--sab15) 240px; }
.endline .el-mk{ flex:none; font:500 12px/16px var(--mono); letter-spacing:.4em; margin-right:-.4em; color:#8A909B; }
.endline .el-mk i{ font-style:normal; color:var(--champ); }
.endline .el-tx{ margin:0; font-size:12.5px; line-height:18px; letter-spacing:.01em; color:#8A909B; text-align:start; }
html[dir="rtl"] .endline .el-tx{ font-size:13px; letter-spacing:0; }
.nb{ translate:0 calc(var(--lift,0px) * -1); }
@media (max-width:1199px){ .endline{ padding:0 220px var(--sab15) 28px; } html[dir="rtl"] .endline{ padding:0 28px var(--sab15) 220px; } }
@media (max-width:820px){
  .endline,html[dir="rtl"] .endline{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto 44px; gap:0; padding:14px 16px var(--sab15); }
  .endline .el-tx{ grid-column:1 / -1; grid-row:1; max-width:24em; text-wrap:balance; }
  .endline .el-mk{ grid-column:1; grid-row:2; align-self:center; }
}

@media (prefers-reduced-motion:reduce){
  .fil-wrap *,.fil-wrap *:before,.fil-wrap *:after,.nb *,.nb *:before,.nb *:after,.wa,.wa *{
    animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0ms !important; }
  .closing.k1.landed .pt:after{ animation:none; }
  /* task 004 (I7): the fades that help reading stay, at 200 ms; what moves (translate, scale, the ring) still jumps */
  .bc .wd,.bc .sh,.bc .cn a:after,.bc .cn a i:before,.bc .cn a i:after,.wa,.wa .wtx,.closing .rv{
    transition-property:opacity,color,background-color !important; transition-duration:.2s !important; }
}