/* r2 Console -- shualadom.com in Metrics chrome. The rail padding, rule, tab, toggle and red-rule numbers are lifted from
   Metrics (app/_shared/rf-viewer.css .vmast/.vmbr/.vmastrule, app/styles/shared.css .tab/.theme-toggle);
   _tools/build.py re-reads those sources and fails the build if a copied number is gone. */
:root{--bg:#1f1f1d;--panel:#242422;--card:#2a2a28;--card2:#323230;--line:#4a4a48;--ink:#e8e8e2;--dim:#aaa;
  --rule:rgba(232,232,226,.32);--red:#b62628;--red-ink:#ff5b5d;--scrim:rgba(31,31,29,.72);--glow:0 0 12px rgba(182,38,40,.35);
  --gx:max(16px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));--w:min(1200px,100% - 2 * var(--gx));
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--lk:96px;--tw:.24;
  --f:"Assistant",-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Hebrew",sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace;color-scheme:dark}
[data-theme="light"]{--bg:#f5f5f5;--panel:#ffffff;--card:#f5f5f5;--card2:#f0f0f0;--line:rgba(0,0,0,.18);--ink:#1a1a1a;--dim:#666;
  --rule:rgba(26,26,26,.32);--red-ink:var(--red);color-scheme:light}

*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;background:var(--bg)}
body{margin:0;font:400 17px/1.7 var(--f);color:var(--ink);background:var(--bg);overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.lock{position:fixed;left:0;right:0;overflow:hidden}
img{display:block;max-width:100%;height:auto;border:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
button,input{font:inherit;color:inherit;margin:0}
button{background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
input{appearance:none;-webkit-appearance:none;font-size:16px}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
svg{width:1em;height:1em;fill:currentColor;flex:none}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;top:-80px;inset-inline-start:var(--gx);z-index:200;display:flex;align-items:center;min-height:48px;padding:0 16px;background:var(--red);color:#fff;font-weight:800}
.skip:focus{top:calc(8px + var(--st))}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
main{display:block;padding-bottom:64px}
p+p{margin-top:16px}

/* one box for every square control: 48 both ways, 2px line border */
.burger,.s-tog,.xs-b,.tog,.mnav-x,.sov-x,.td-x,.car-arr,.soc a{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none;border:2px solid var(--line);color:var(--ink);background:transparent}
.burger svg,.s-tog svg,.xs-b svg,.mnav-x svg,.sov-x svg,.td-x svg,.car-arr svg,.soc svg,.srch button svg,.sov-f button svg,.lb button svg{width:20px;height:20px}
[dir=ltr] .car-arr svg,[dir=ltr] .lb-p svg,[dir=ltr] .lb-n svg{transform:scaleX(-1)}
.tog svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.t-moon,[data-theme="light"] .t-sun{display:none}
[data-theme="light"] .t-moon{display:block}
.lg-l,[data-theme="light"] .lg-d{display:none}
[data-theme="light"] .lg-l{display:block}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;background:var(--red);color:#fff;font:800 16px/1.2 var(--f);letter-spacing:.5px;text-align:center;border:0}

/* ── header: Metrics' rail (.vmast) between a search box and the door/toggle pair ────────────────── */
.hdr{background:var(--panel);padding-top:var(--st)}
.hdr-in{width:var(--w);margin-inline:auto;display:grid;align-items:center}
.srch{display:grid;grid-template-columns:216px 48px;height:48px}
.srch input,.sov-f input{height:48px;min-width:0;padding:0 14px;background:var(--card);border:1px solid var(--line);color:var(--ink);font:500 16px/1 var(--f)}
.srch input{border-inline-end:0}
.srch input:focus-visible,.sov-f input:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.srch input::placeholder,.sov-f input::placeholder{color:var(--dim);opacity:1}
.srch button,.sov-f button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--red);color:#fff}

/* the lockup, his pick (r2-brand 03): the full Metrics logo | a rule | the Hebrew name on one line, all three on the
   logo's centre line. One variable sizes it: --lk, the logo's height. The name's letters are centred, not its line box:
   Assistant 800's letter body sits .07em below the box centre (r2-brand/_tools/measure_type.py). */
.ralm{grid-area:r;display:flex;align-items:center;padding:15px 0}
.lk{height:var(--lk);width:auto;max-width:none}
.tw-t{display:flex;align-items:center;height:calc(var(--lk) * .254);margin-inline-start:calc(var(--lk) / 8);padding-inline-start:calc(var(--lk) / 8);
  border-inline-start:1px solid var(--rule);font:800 calc(var(--lk) * var(--tw))/1 var(--f);white-space:nowrap;color:var(--ink)}
.tw-t>span{position:relative;top:-.07em}
.ralrule{height:4px;background:var(--red)}

/* the desktop row, his pick (mockups/header 01 Mirror): the footer's own row turned over -- the footer's two nav lists
   either side of the lockup (its logo, its 15px box), the search square and the theme square at the two ends, the athlete
   zone the one red cell. The row is the lockup's height; the current page drops the rail's 4px red onto the rule. The
   search square opens the header's search box in place (site.js). Up to 64em (1024px at the default text size) the phone
   row (.hdr-in) stands alone; the desktop row is at most 75rem (1200px at the default), so larger text widens it. */
.hdr:not(.xs-on) .xs-f{display:none}
@media (max-width:64em){
  .hdr .xs-b,.hdr .xd,.hdr .xs-f{display:none}
}
@media not all and (max-width:64em){
  .hdr .hdr-in{display:none}
  .hdr .xd{width:min(75rem,100% - 2 * var(--gx));margin-inline:auto;display:grid;grid-template-columns:48px minmax(0,1fr) auto minmax(0,1fr) 48px;
    grid-template-areas:"q ns r ne t";align-items:center;column-gap:clamp(8px,11.6% - 107.2px,32px);--P:clamp(14px,3.4vw - 20.85px,21px)}
  .hdr .x1-n{display:contents}
  .hdr .xs-b{grid-area:q}
  .hdr .xd>.tog{grid-area:t}
  .hdr .xd .ralm{grid-area:r;padding-inline:6px;margin-inline:-6px}
  .hdr .f-nav{width:auto;align-self:stretch;align-items:stretch}
  .hdr .f-nav--s{grid-area:ns;justify-self:end}
  .hdr .f-nav--e{grid-area:ne;justify-self:stretch}
  .hdr .f-nav li{flex:none}
  .hdr .f-nav a{position:relative;align-self:stretch;flex:none;padding-inline:var(--P);white-space:nowrap}
  .hdr .f-nav a[aria-current]{color:var(--ink)}
  .hdr .f-nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--red)}
  .hdr .f-nav a:focus-visible,.hdr .xd .ralm:focus-visible{outline-offset:-4px}
  .hdr .f-nav li:has(.xa-az)::before{display:none}
  .hdr .f-nav li:has(.xa-az){flex:1 1 auto;min-width:0}
  .hdr .f-nav a.xa-az{flex:1 1 auto;align-self:center;display:flex;align-items:center;justify-content:center;gap:10px;height:48px;min-height:0;
    margin-inline-start:calc(var(--P) + 3px);padding-block:0;padding-inline:16px;white-space:nowrap;
    background:transparent;border:2px solid var(--red-ink);color:var(--red-ink);box-shadow:none}
  .hdr .xa-i{flex:none;display:flex;align-items:center;justify-content:center}
  .hdr .xa-i svg{width:20px;height:20px}
  .hdr .f-nav a.xa-az:focus-visible{outline-offset:2px;outline-color:var(--ink)}
  .hdr .xs-f{grid-area:ns;justify-self:stretch;grid-template-columns:minmax(0,1fr) 48px}
  .hdr.xs-on .f-nav--s{visibility:hidden}
}
@media (hover:hover){
  .hdr .f-nav a.xa-az:hover{background:var(--red);color:#fff;box-shadow:none}
}

.tab{display:flex;align-items:center;justify-content:center;width:160px;min-height:48px;padding:8px 16px;background:var(--card);border:1px solid var(--line);color:var(--dim);font:800 15px/1.2 var(--f);letter-spacing:1px;text-align:center;transition:background .12s,color .12s,border-color .12s,box-shadow .12s}

/* ── phone/tablet menu sheet and search panel ─────────────────────────────────────────────────── */
.mnav{position:fixed;inset:0;z-index:50;display:none;background:var(--bg);overflow:auto;overscroll-behavior:contain}
.mnav.on{display:block}
.mnav-hd{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;column-gap:8px;padding:var(--st) var(--gx) 0;background:var(--panel)}
.mnav-hd .ralm{grid-area:auto;justify-self:center}
.mnav nav{padding:24px var(--gx) calc(24px + var(--sb))}
.mnav-l{display:flex;flex-direction:column;align-items:center;gap:8px}

.sov{--hr:calc(var(--lk) + 30px + var(--st));position:fixed;inset:0;z-index:60;display:none;padding:calc((var(--lk) - 18px) / 2 + var(--st)) var(--gx) 0;
  background:linear-gradient(to bottom,var(--panel) var(--hr),var(--red) var(--hr),var(--red) calc(var(--hr) + 4px),var(--scrim) calc(var(--hr) + 4px))}
.sov.on{display:grid;grid-template-columns:minmax(0,1fr) 48px;align-content:start;column-gap:8px}
.sov-f{display:grid;grid-template-columns:48px minmax(0,1fr);height:48px}
.sov-f button{order:-1}
.sov-f input{border-inline-start:0}

/* ── heroes and the title plate ───────────────────────────────────────────────────────────────── */
.hero{position:relative}
.hero-pic{height:clamp(200px,32vw,460px);height:clamp(200px,max(min(32vw,460px),30vw),70svh);background:var(--card2);overflow:hidden}
.hero-bg{width:100%;height:100%;object-fit:cover}
.hero--contact .hero-bg{object-position:50% 30%}
.hero--arts .hero-bg{object-position:50% 45%}
.hero--gal .hero-bg{object-position:50% 38%}
.hero--home .hero-pic{position:relative;height:min(60vw,calc(100svh - 300px));min-height:220px}
.hero--home .hero-bg{object-position:36% 62%}
/* a section's name (build.py sh()) stands in the foot of its photo, which dissolves into the page on the home's curve,
   scaled to the strip; the rise is the home's own, re-selected out of hero.css where the marker stands (build.py BLEND) */
/*@blend*/
.hero{--fs:clamp(32px,5vw,60px);overflow:hidden}
.hero-pic{position:relative}
.hero-pic::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,var(--bg) 4%,color-mix(in srgb,var(--bg) 94%,transparent) 22%,color-mix(in srgb,var(--bg) 60%,transparent) 36%,transparent 60%)}
.hero-cap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:fit-content;max-width:100%;margin:calc(-1 * var(--fs)) auto 0;padding:0 var(--gx) calc(.5 * var(--fs));text-align:center}
.hero-tag{display:block;margin-top:14px;font:600 clamp(18px,1.5vw,21px)/1.5 var(--f);color:var(--dim)}

/* ── sections ─────────────────────────────────────────────────────────────────────────────────── */
.sec{padding-top:64px}
.sec>*{width:var(--w);margin-inline:auto}
.panel{background:var(--panel);border:1px solid var(--line);padding:40px}
.ttl{font:800 30px/1.25 var(--f);text-align:center;margin-bottom:32px}
.panel .ttl,.tc-name,.ct-h{text-align:start}
.panel .ttl{margin-bottom:24px}
.ct-h{font:800 26px/1.3 var(--f);margin-bottom:24px}
.tc-sub,.td-sub{color:var(--dim);font-weight:700}
.more{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:32px}

/* carousels */
.car{position:relative}
.car-vp{overflow:hidden;touch-action:pan-y}
.car-track{display:flex;gap:16px;will-change:transform}
.car-track>*{flex:0 0 100%;min-width:0}
.car-bar{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:24px}
/* the dots never wrap: they shrink, so a long carousel stays one row (r3's, lifted) */
.car-dots{display:flex;align-items:center;justify-content:center;min-width:0}
.car-dots>*{display:flex;align-items:center;justify-content:center;height:48px;min-width:0}
.car-dots>button{width:48px;flex:0 1 48px}
.car-dots>span{width:20px;flex:0 1 20px}
.car-dots>*::before{content:"";display:block;flex:none;width:12px;height:12px;border:1px solid var(--line)}
.car-dots>[aria-current="true"]::before{background:var(--red);border-color:var(--red)}

.btn-2{background:transparent;color:var(--ink);border:2px solid var(--line)}

.gcar .car-track>*{flex-basis:calc((100% - 16px) / 2)}
.gs img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--card2)}

/* home: articles grid */
.agrid{display:grid;grid-template-columns:1fr 2fr 1fr;grid-template-rows:240px 240px;grid-template-areas:"a m b" "c m d";gap:16px}
.at--m{grid-area:m}.at--a{grid-area:a}.at--b{grid-area:b}.at--c{grid-area:c}.at--d{grid-area:d}
.at{display:flex;flex-direction:column;min-width:0}
.at a{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-top:44px;overflow:hidden;background:var(--card2);color:#fff}
.at img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.at-cat{position:absolute;top:12px;inset-inline-start:12px;z-index:1;padding:6px 10px;background:var(--red);color:#fff;font:800 13px/1.1 var(--f)}
.at-b{position:relative;display:block;padding:40px 16px 16px;background:linear-gradient(to bottom,rgba(31,31,29,0),rgba(31,31,29,.85) 45%);color:#fff}
.at-t{font:800 18px/1.3 var(--f);text-wrap:balance}
/* lit (hover/focus): the title turns brand red, and the scrim under it closes up so the red reads over any photo */
.at-b{--lit:linear-gradient(to bottom,rgba(31,31,29,0),rgba(31,31,29,.94) 40px)}
.at a:focus-visible .at-b{background:var(--lit)}
.at a:focus-visible .at-t{color:#ff5b5d}
.at--m .at-t{font-size:26px}
.at-m{display:block;margin-top:6px;font-size:14px;color:#e8e8e2}

/* two-up rows: contact */
.row{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.row-txt{display:flex;flex-direction:column;justify-content:center}
.row-img{display:flex;align-items:center;justify-content:center;padding:12px;background:var(--card2);border:1px solid var(--line);overflow:hidden}
.row-img img{width:auto;max-height:min(720px,80svh)}

/* testimonies: cards with an excerpt; the full testimony opens in its dialog */
.tgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.tc{position:relative;grid-column:span 2;grid-row:span 5;display:grid;grid-template-rows:subgrid;row-gap:12px;min-width:0;padding-bottom:24px;background:var(--panel);border:1px solid var(--line);border-bottom:3px solid var(--red)}
.tc>:not(.tc-img){margin-inline:24px}
.tc-img{grid-row:1;margin-bottom:8px;background:var(--card2)}
.tc-img img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 25%}
.tc-name{grid-row:2;font:800 22px/1.3 var(--f)}
.tc-sub{grid-row:3}
.tc-x{grid-row:4;margin:0}
.tc-more{grid-row:5;align-self:end}
.tc-more::after{content:"";position:absolute;inset:0}
.td{width:min(760px,100% - 2 * var(--gx));max-width:none;max-height:calc(100% - 32px - var(--st) - var(--sb));margin:auto;padding:0;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-top:4px solid var(--red);overflow:hidden}
.td[open]{display:flex;flex-direction:column}
.td::backdrop{background:rgba(31,31,29,.86)}
.td-hd{flex:none;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;column-gap:8px;padding:16px;border-bottom:1px solid var(--line)}
.td-t{grid-column:2;text-align:center}
.td-name{font:800 26px/1.3 var(--f)}
.td-sub{margin-top:10px}
.td-x{grid-column:3}
.td-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px 32px 32px;line-height:1.75}

/* articles */
.arts-q{text-align:center;font-weight:700;margin-bottom:24px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);min-width:0}
.card-img{display:block;background:var(--card2)}
.card-img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card-b{flex:1;display:flex;flex-direction:column;gap:10px;padding:20px 24px 24px}
.card-t{font:800 21px/1.3 var(--f);text-wrap:balance}
.card-t a{display:flex;align-items:center;min-height:48px}
.card-t a:focus-visible{color:var(--red-ink)}
.card-m{font-size:14px;color:var(--dim)}
.card-m+.card-x{margin-top:0}
.card-x{font-size:17px}
.card-more{align-self:start;margin-top:auto;display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:2px solid var(--line);font-weight:800}

/* gallery */
.gal-grid{columns:3;column-gap:8px}
.gi{position:relative;display:block;margin-bottom:8px;break-inside:avoid;overflow:hidden;background:var(--card2)}
.gi img{width:100%}
.gi::after{content:"";position:absolute;inset:0;background-color:rgba(31,31,29,0);transition:background-color .4s}
.gal-grid.js-m{position:relative;columns:auto}
.gal-grid.js-m .gi{position:absolute;margin:0}
.gal-grid.js-m .gi img{height:100%;object-fit:cover}
.gal-grid.ready .gi img{transition:opacity .6s}
.gi.wait img{opacity:0}
.lb{--bg:#1f1f1d;--panel:#242422;--line:#4a4a48;--ink:#e8e8e2;--dim:#aaa;position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(31,31,29,.97);color:var(--ink);touch-action:none;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.lb.on{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}
.lb img{max-width:calc(100% - 144px);max-height:calc(100svh - 144px);width:auto;height:auto;user-select:none;-webkit-user-drag:none}
.lb button{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--panel);border:2px solid var(--line);color:var(--ink)}
.lb-x{top:calc(16px + var(--st));inset-inline-end:var(--gx)}
.lb-p,.lb-n{top:50%;margin-top:-24px}
.lb-p{inset-inline-start:var(--gx)}
.lb-n{inset-inline-end:var(--gx)}
.lb-c{position:absolute;bottom:calc(16px + var(--sb));left:0;right:0;pointer-events:none;display:flex;align-items:center;justify-content:center;height:48px;font:700 15px/1 var(--mono);color:var(--dim);direction:ltr}

/* contact */
.ct-txt{align-items:center;text-align:center}
.ct-txt .ct-h{text-align:center}
.ct-h2{margin-top:40px}
.ct-mail a{display:inline-flex;align-items:center;gap:12px;min-height:48px;font-size:20px;font-weight:700}
.ct-mail svg{width:20px;height:20px}
.soc{--tgf:var(--panel);display:flex;justify-content:center;gap:8px}

/* article */
.ar-hero{height:420px;display:flex;justify-content:center;background:var(--panel);border-bottom:1px solid var(--line)}
.ar-bg{height:100%;width:auto;max-width:100%;object-fit:contain}
.ar-card{width:min(800px,100% - 2 * var(--gx));margin:40px auto 0}
.ar-cat,.ar-info,.ar-h{text-align:center}
.ar-cat a{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;background:var(--red);color:#fff;font-weight:800}
.ar-info{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:16px;color:var(--dim);font-size:15px}
.ar-info li{display:flex;align-items:center;gap:8px}
.ar-info svg{width:16px;height:16px}
.ar-h{font:800 36px/1.25 var(--f);margin:16px 0 40px}
.ar-body{font-size:18px;line-height:1.8}
.ar-body p+p{margin-top:18px}
.ar-body>*+*{margin-top:18px}
.ar-body .red{border-inline-start:4px solid var(--red);padding-inline-start:16px;font-weight:700}
.ar-body .sp{display:none}
.ph{font:800 26px/1.3 var(--f)}
.ar-body>.ph{margin-top:48px}
.pf{text-align:center}
.pf img{width:min(100%,500px);max-height:min(80svh,720px);object-fit:contain;margin-inline:auto}
.pf figcaption{margin-top:10px;font-size:17px;color:var(--dim)}
.pbox{padding:24px;padding-inline-end:28px;background:var(--panel);border-inline-start:4px solid var(--red)}
.pbox>*+*{margin-top:16px}
.pbox-h{font:800 20px/1.35 var(--f)}
.pq{padding:24px;text-align:center;background:var(--panel);border-bottom:3px solid var(--red);font-size:20px;font-weight:700}
.ar-body ul{list-style:square;padding-inline:24px}
.ar-body ul+ul{margin-top:6px}
.ar-body li::marker{color:var(--red)}

/* footer, his pick (mockups/footer 02 מסילה): the header's grid at the page's foot. Three destinations either side of
   the logo in cells of one width; under the site's 1px line, the mission, the contact squares and the copyright on the
   same axis; the dedication alone as the page's last line. */
.ftr{background:var(--panel);border-top:4px solid var(--red)}
.ftr-in{width:min(75rem,100% - 2 * var(--gx));margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) min-content minmax(0,1fr);
  grid-template-areas:"ns m ne" "l l l" "t t t" "c1 k c2";align-items:center;column-gap:32px;padding-top:16px}
.ftr-in::before{content:"";grid-area:l;height:1px;margin-top:16px;background:var(--line)}
.f-mark{grid-area:m;justify-self:center;display:flex;justify-content:center;min-width:48px}
.f-mark .lk{height:64px}
/* three cells of 152px, each with its rule on the logo's side (459 = 3 x 153, 28.6875rem at the default text size) */
.f-nav{display:flex;align-items:center;width:min(28.6875rem,100%)}
.f-nav li{flex:1 1 0;display:flex;align-items:center}
/* a half carrying a fourth destination (seven in all): the cells share the room by their words, so every word keeps the
   same air to its rules */
.f-nav:has(>li:nth-child(4)) li{flex-basis:auto}
.f-nav--s li::after,.f-nav--e li::before{content:"";flex:none;width:1px;height:16px;background:var(--rule)}
.f-nav--s{grid-area:ns;justify-self:end}
.f-nav--e{grid-area:ne;justify-self:start}
.f-nav a{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-height:48px;font:800 15px/1.2 var(--f);letter-spacing:1px;color:var(--dim);text-align:center}
.f-nav a:focus-visible{color:var(--red-ink)}
html:lang(en) .f-nav a,html:lang(en) .hdr .xa-t,html:lang(en) .m1-az .xa-t{font-size:13px;letter-spacing:.2em;text-indent:.2em;text-transform:uppercase}
.f-tag,.f-copy{font:400 14px/1.45 var(--f);color:var(--dim)}
.f-tag{grid-area:t;justify-self:center;margin-top:20px;text-align:center}
.f-soc{grid-area:k;margin-block:12px}
.f-copy{display:contents}
.f-cd{display:none}
.f-c1{grid-area:c1;justify-self:end;text-align:end}
.f-c2{grid-area:c2;justify-self:start;text-align:start}
.f-ded{display:flex;align-items:center;justify-content:center;gap:16px;padding:2px var(--gx) calc(18px + var(--sb));font:600 15px/1.5 var(--f);color:var(--ink);text-align:center}
.f-ded::before,.f-ded::after,html:lang(en) .bn-tag::before,html:lang(en) .bn-tag::after{content:"";flex:none;width:40px;height:1px;background:var(--red)}

@media (hover:hover){
  .btn:not(.btn-2):not(:disabled):hover{outline:2px solid var(--ink);outline-offset:2px}
  .btn-2:hover{border-color:var(--red)}
  .tab:hover{color:var(--ink);border-color:var(--dim)}
  .burger:hover,.s-tog:hover,.xs-b:hover,.tog:hover,.mnav-x:hover,.sov-x:hover,.td-x:hover,.car-arr:hover,.soc a:hover,.card-more:hover,.lb button:hover{border-color:var(--red)}
  .srch button:hover,.sov-f button:hover{outline:2px solid var(--ink);outline-offset:2px}
  .at a:hover img{transform:scale(1.05)}
  .at a:hover .at-b{background:var(--lit)}
  .at a:hover .at-t{color:#ff5b5d}
  .gi:hover::after{background-color:rgba(31,31,29,.3)}
  .card-t a:hover{color:var(--red-ink)}
  .tc:hover .tc-more{border-color:var(--red)}
  .f-nav a:hover{color:var(--red-ink)}
}

@media (max-width:64em){
  .hdr-in{grid-template-columns:48px minmax(0,1fr) 48px;grid-template-areas:"b r t";column-gap:8px}
  .burger{display:flex;grid-area:b}
  .s-tog{display:flex;grid-area:t}
  .hdr .ralm{justify-self:center;min-width:0;max-width:100%}
  .hdr .ralm .tw-t{height:auto;min-height:calc(var(--lk) * .254);white-space:normal}
  /* the footer's phone form (02 · A) switches with the header's burger: the burger carries the nav; no mission, no
     contact squares. The copyright's two halves take the nav's cells either side of the logo, behind the rail's own
     16px rules, each hugging its rule */
  .f-nav,.f-tag,.f-soc{display:none}
  .ftr-in{grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,1fr);grid-template-areas:"c1 r1 m r2 c2";column-gap:12px;padding-bottom:12px}
  .ftr-in::before,.ftr-in::after{content:"";display:block;width:1px;height:16px;margin:0;background:var(--rule)}
  .ftr-in::before{grid-area:r1}
  .ftr-in::after{grid-area:r2}
  .f-mark .lk{height:56px}
  .f-copy{font-size:13px}
  .f-c1,.f-c2{text-wrap:balance}
  .f-ded{gap:12px;font-size:14px}
  .f-ded::before,.f-ded::after,html:lang(en) .bn-tag::before,html:lang(en) .bn-tag::after{width:24px}
}
@media (max-width:991px){
  .agrid{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-template-areas:"m m" "a b" "c d"}
  .at a{min-height:220px}
  .at--m a{min-height:320px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal-grid{columns:2}
  .tgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tc:last-child:nth-child(odd){grid-column:2/span 2}
}
@media (max-width:767px){
  /* the phone lockup fills the header's middle column (48 + 8 each side) and stops at 64; 3.52 = logo .948 + gaps 2/8 + name --tw x 9.642 */
  :root{--lk:clamp(48px,(100vw - 2 * var(--gx) - 121px) / 3.52,64px)}
  main{padding-bottom:40px}
  .sec{padding-top:40px}
  .panel{padding:24px 20px}
  .ttl{font-size:26px;margin-bottom:24px}
  .ct-h{font-size:22px}
  .row{grid-template-columns:minmax(0,1fr)}
  .row-img img{max-height:min(560px,70svh)}
  .gcar .car-track>*{flex-basis:100%}
  .lb img{max-width:calc(100% - 2 * var(--gx));max-height:calc(100svh - 176px)}
  .lb-p,.lb-n{top:auto;bottom:calc(16px + var(--sb));margin-top:0}
  .ar-hero{height:240px}
  .ar-card{margin-top:28px}
  .ar-h{font-size:26px;margin-bottom:28px}
  .pq{font-size:18px}
  .td-name{font-size:22px}
  .td-body{padding:20px}
}
@media (max-width:575px){
  .agrid{grid-template-columns:minmax(0,1fr);grid-template-areas:"m" "a" "b" "c" "d"}
  .at--m a{min-height:260px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .tgrid{grid-template-columns:minmax(0,1fr)}
  .tc,.tc:last-child:nth-child(odd){grid-column:auto}
  .tc-img img{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* site additions: the classes import_wp.py emits for the 21 post bodies, which the r2 mockup (coaches only) never carried */
.c-red{color:var(--red-ink)}
.c-blue{font-weight:700}
.center{text-align:center}
.note{padding:24px;padding-inline-end:28px;background:var(--panel);border-inline-start:4px solid var(--red)}
.note>*+*{margin-top:12px}
.pbox-name,.pbox-title,.note-title{font:800 20px/1.35 var(--f)}
.ar-body ol{list-style:decimal;padding-inline:max(24px,1.4em) 24px}
.ar-body hr{border:0;border-top:1px solid var(--rule)}
.ar-body video{display:block;width:min(100%,500px);max-height:min(80svh,720px);margin-inline:auto;background:var(--panel)}
.pbox .pf img{width:min(100%,300px)}
/* The Hebrew site as the English one (mockups/he-parity, approved 2026-10-02). Bundled into the style sheet on the
   Hebrew build only, in the place of tape.css.
   The tape: tape.css's box carrying the name, its height from its own logo. The letters are the English size x1.12 (the
   Hebrew letter body stands .58em where a Latin capital stands .65em, in Assistant), their body centred, with no case
   and no tracking; 4px of padding keeps the x1.12 letters in the formula's band.
   The home banner: hero.css's English logo heights and tagline without the caps and the tracking; the tagline's red
   lines are .f-ded's (style.css). Up to 575px the tagline breaks after its first phrase (.bn-tb).
   The face is Heebo (mockups/he-fonts, ruled 2026-10-02), both scripts. Its Hebrew letter body sits centred in its box
   unnudged (mockups/menu-sheet/_tools/centre.py). */
@font-face{font-family:"Heebo";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/heebo-hebrew.f1f7cfae.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Heebo";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/heebo-latin.50dae2e1.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
html:lang(he){--f:"Heebo",-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Hebrew",sans-serif}
@media (max-width:767px){
  html:lang(he){--lk:64px}
}
@media (max-width:64em){
  html:lang(he) .ralrule,html:lang(he) .sov::after{display:flex;align-items:center;justify-content:center;height:auto;min-height:calc(max(11px,calc(var(--lk) * .172)) + 10px);padding:4px var(--gx);text-align:center;background:var(--red);color:#fff}
  html:lang(he) .rt,html:lang(he) .sov::after{font:800 calc(max(11px,calc(var(--lk) * .172)) * 1.12)/1 var(--f);text-wrap:balance}
  html:lang(he) .ralm{min-width:48px;justify-content:center}
  html:lang(he) .sov::after{content:attr(data-rt);position:absolute;inset:var(--hr) 0 auto}
}
@media not all and (max-width:64em){
  html:lang(he) .rt{display:none}
  html:lang(he) .hdr .xd{--P:clamp(10px,5.34vw - 44.7px,21px)}
}
html:lang(he) .bn-logo{height:clamp(120px,30svh,340px)}
@media (max-aspect-ratio:1/1){
  html:lang(he) .bn-logo{height:20svh;min-height:96px}
}
@media (max-height:500px) and (min-aspect-ratio:1001/1000){
  html:lang(he) .bn-logo{height:44svh}
}
html:lang(he) .bn-tag{display:flex;align-items:center;justify-content:center;gap:16px;max-width:none;margin-top:6px;
  font:800 clamp(14px,1.25vw,18px)/1.35 var(--f);color:var(--ink);text-wrap:balance}
html:lang(he) .bn-tag::before,html:lang(he) .bn-tag::after{content:"";flex:none;width:40px;height:1px;background:var(--red)}
@media (max-width:64em){
  html:lang(he) .bn-tag::before,html:lang(he) .bn-tag::after{width:24px}
}
@media not all and (max-width:575px){
  html:lang(he) .bn-tb{display:none}
}

/* r2-hero: r2's home opening on one full-viewport photo. Loaded after r2.css (r2's own sheet, copied verbatim);
   every double-percent token below is a number _tools/build.py reads out of r2's sheet, so a renamed rule fails the build. */

/* ── the banner: exactly one viewport, the photo under everything ────────────────────────────────── */
.bn{--bx:max(var(--gx),3vw);position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;background:var(--card2);
  /* night: steel letters lit from above, a cool shadow pool under them, floodlit mist, the brand red reflected on the ground */
  --ink1:#fbfdff;--ink2:#aab6c3;--wrap:rgba(214,228,242,.42);--cast:rgba(4,7,11,.78);
  --pool:rgba(8,11,16,.74);--haze:rgba(200,214,228,.30)}
[data-theme="light"] .bn{
  /* day: slate letters in an overcast fog, never black */
  --ink1:#56616d;--ink2:#222a33;--wrap:rgba(255,255,255,.75);--cast:rgba(34,42,52,.26);
  --pool:rgba(238,242,246,.74);--haze:rgba(250,252,253,.62)}
.bn-pic{position:absolute;inset:0;display:none;z-index:0}
.bn-pic img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0}
/* one photo per theme; on a flip the old one is held under the new one until the new file has arrived (hero.js) */
.bn-pic--n,[data-theme="light"] .bn-pic--d{display:block;z-index:1}
[data-theme="light"] .bn-pic--n{display:none;z-index:0}
.bn.hold-n .bn-pic--n,.bn.hold-d .bn-pic--d{display:block}
/* r2's own home fade, at its own px: the photo meets the page exactly as r2's hero does */
.bn::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;height:300px;background:linear-gradient(to top,var(--bg) 20px,color-mix(in srgb,var(--bg) 94%,transparent) 110px,color-mix(in srgb,var(--bg) 60%,transparent) 180px,transparent 300px)}
.bn-cap{z-index:3}
.bn-bar{z-index:4}
.bn~.hdr{padding-top:0}
.hdr:focus{outline:none}

/* the bar: r2's 48 square, twice, on the photo -- filled, so the icon reads on any sky */
.bn-bar{position:absolute;top:calc(var(--st) + 16px);left:var(--bx);right:var(--bx);display:flex;justify-content:space-between}
.bn-menu,.bn-down{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none;border:2px solid var(--line);color:var(--ink);background:transparent}
.bn-menu svg,.bn-down svg{width:20px;height:20px}
.bn-menu,.bn-bar .tog,.bn-down{background:color-mix(in srgb,var(--panel) 80%,transparent)}
.bn-down svg{transform:rotate(90deg)}

/* the words stand on the ground of the photo: a shadow pool under them, their own cast shadow, mist over their feet */
.bn-cap{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 var(--bx) calc(var(--sb) + 16px);text-align:center}
.bn-cap::before{content:"";position:absolute;inset:-70% 0 0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 72% 88% at 50% 100%,var(--pool) 50%,color-mix(in srgb,var(--pool) 55%,transparent) 76%,transparent)}
.bn-h{position:relative;z-index:0;font:800 var(--fs)/1.05 var(--f);margin:0}
.bn-l{display:block;color:var(--ink2);
  background:url(/media/bn-grain-f85a84.webp) 0 0/160px 160px,linear-gradient(to bottom,var(--ink1) 22%,var(--ink2) 86%);
  background-blend-mode:overlay,normal;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 1px var(--wrap)) drop-shadow(0 .04em .04em var(--cast)) drop-shadow(0 .12em .22em var(--cast))}
.bn-h::before,.bn-h::after{content:"";position:absolute;pointer-events:none}
/* the brand red underline: a full-strength core just under the letters' feet, below the mist, fading smoothly out */
.bn-h::before{z-index:-1;left:-8%;right:-8%;bottom:-.26em;height:.32em;
  background:radial-gradient(farthest-side,var(--red) 18%,color-mix(in srgb,var(--red) 80%,transparent) 34%,color-mix(in srgb,var(--red) 50%,transparent) 52%,
    color-mix(in srgb,var(--red) 22%,transparent) 70%,color-mix(in srgb,var(--red) 6%,transparent) 86%,transparent)}
.bn-h::after{z-index:1;left:-6%;right:-6%;bottom:-.04em;height:.36em;background:radial-gradient(farthest-side at 50% 100%,var(--haze),transparent)}
.bn-tag{max-width:24em;text-wrap:balance}
[data-theme="light"] .bn-tag{color:var(--ink1)}
.bn-down{margin-top:20px}
@keyframes bn-in{from{opacity:0;transform:translateY(14px)}}
.bn-cap>*{animation:bn-in .9s cubic-bezier(.2,.7,.2,1) both}
.bn-cap>:nth-child(2){animation-delay:.1s}
.bn-cap>:nth-child(3){animation-delay:.2s}
.bn-cap>:nth-child(4){animation-delay:.3s}
.bn-cap>:nth-child(5){animation-delay:.4s}

/* 01 gate: the full Metrics logo carries the English, so nothing else says it */
.bn--o1{--fs:min(9svh,(100vw - 2 * var(--bx)) / 5.541)}
.bn--o1 br.bn-p{display:none}
.bn-logo{height:clamp(88px,17svh,184px);width:auto;margin:0 auto 18px}
html:lang(en) .bn-logo{height:clamp(120px,30svh,340px)}
@media (max-aspect-ratio:1/1){
  html:lang(en) .bn-logo{height:20svh;min-height:96px}
}
/* the red lines stand 16px from the letters: the gap plus the tracking the words carry at each end (the indent, the
   last letter's spacing). The words break where the screen would (build.py), so the box hugs them */
html:lang(en) .bn-tag{display:flex;align-items:center;justify-content:center;gap:calc(16px - .3em);max-width:none;margin-top:6px;
  font:800 clamp(14px,1.25vw,18px)/1.35 var(--f);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--ink);text-wrap:balance}
@media not all and (max-width:599px){
  html:lang(en) .bn-tb{display:none}
}
@media (max-width:359px){
  html:lang(en) .bn-tb{display:none}
}
@media not all and (max-width:359px){
  html:lang(en) .bn-t3{display:none}
}

@media (max-width:767px){
  .bn::after{height:190px;background:linear-gradient(to top,var(--bg) 12px,color-mix(in srgb,var(--bg) 94%,transparent) 66px,color-mix(in srgb,var(--bg) 55%,transparent) 110px,transparent 190px)}
}
/* a phone on its side: one-line names, a smaller logo, tighter gaps */
@media (max-height:500px) and (min-aspect-ratio:1001/1000){
  .bn-bar{top:calc(var(--st) + 12px)}
  .bn-cap{padding-bottom:calc(var(--sb) + 12px)}
  .bn-h:not(.vh) .bn-l{display:inline}
  .bn--o1{--fs:min(12svh,(100vw - 2 * var(--bx)) / 9.642)}
  .bn-logo{height:88px;margin-bottom:8px}
  html:lang(en) .bn-logo{height:44svh}
  .bn-tag{max-width:none}
  .bn-down{margin-top:12px}
}
@media (hover:hover){
  .bn-menu:hover,.bn-down:hover{border-color:var(--red)}
}

/* ── the board: one tab per photo, a desktop and a phone frame side by side at one labelled scale ────── */
html.bdh,.bdh body{height:100%;overflow:hidden}
.bd{display:flex;flex-direction:column}
.bd-top{flex:none;display:flex;align-items:center;gap:16px;height:64px;padding:0 12px;background:var(--panel)}
.bd-brand{flex:1;min-width:0;display:flex;align-items:center;gap:12px}
.bd-brand .lk{height:40px}
.bd-tx{min-width:0}
.bd-t{font:800 15px/1.28 var(--f)}
.bd-one{font:600 13px/1.35 var(--f);color:var(--dim)}
.bd-tabs{flex:none;display:flex;gap:8px}
.bd-tabs .tab{width:128px}
.bd-tabs .tab[aria-selected="true"]{background:var(--red);border-color:var(--red);color:#fff}
.bd-main{flex:1;min-height:0;padding:12px}
.bd-opt{display:flex;justify-content:center;align-items:flex-start;gap:16px}
.bd-col{display:flex;flex-direction:column}
.bd-lab{flex:none;height:24px;font:700 13px/20px var(--f);color:var(--dim);white-space:nowrap}
.bd-win{position:relative;overflow:hidden;outline:1px solid var(--line);background:var(--bg)}
.bd-f{position:absolute;top:0;left:0;display:block;border:0;transform-origin:0 0;background:var(--bg)}
@media (hover:hover){.bd-tabs .tab[aria-selected="true"]:hover{color:#fff;border-color:var(--red)}}

/* r2-collage: the banner's photo becomes ten, mirrored round the page's axis. Joined into page.css after r2's sheet and
   hero.css (01's sheet), both verbatim: the bar, the caption, its fade and every type size are 01's; this sheet only lays the
   tiles, tints them for night and day, and narrows 01's fade to the axis where tiles stand either side of the words. */

/* ── the grid: LTR so left means left; every area has its mirror ─────────────────────────────────── */
.bn--cg{--g:3px;--plogo:12svh}
.cg{position:absolute;inset:0;z-index:0;display:grid;direction:ltr;gap:var(--g);background:var(--card2);
  grid-template-columns:repeat(2,minmax(0,1fr)) repeat(2,minmax(0,2fr)) repeat(2,minmax(0,1fr));
  grid-template-rows:minmax(0,27fr) minmax(0,43fr) minmax(0,30fr);
  grid-template-areas:"l1 l1 fl fr r1 r1" "p1 p2 fl fr p3 p4" "l2 l2 . . r2 r2"}
/* each photo fills a box that is the grid item (WebKit resolves a grid item's own height:100% against the whole grid) */
.cg-c{position:relative;min-width:0;min-height:0}
.cg-t{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;
  object-position:var(--fx,50%) var(--fy,50%);animation:cg-on 1.1s cubic-bezier(.3,.6,.2,1) both}
/* the faces dissolve at the chest into the ground the words stand on: no tile edge runs behind the logo or the name */
.cg-yan,.cg-d93{-webkit-mask-image:linear-gradient(to bottom,#000 64%,rgba(0,0,0,.55) 82%,transparent);
  mask-image:linear-gradient(to bottom,#000 64%,rgba(0,0,0,.55) 82%,transparent)}
.cg-yan{grid-area:fl;--fx:62%;--fy:22%}
.cg-d93{grid-area:fr;--fx:38%;--fy:22%}
.cg-d74{grid-area:l1;--fx:42%;--fy:50%}
.cg-d80{grid-area:r1;--fx:50%;--fy:45%}
.cg-d47{grid-area:p1;--fx:45%;--fy:40%}
.cg-d14{grid-area:p2;--fx:50%;--fy:30%}
.cg-d50{grid-area:p3;--fx:50%;--fy:40%}
.cg-d15{grid-area:p4;--fx:60%;--fy:50%}
.cg-k53{grid-area:l2;--fx:50%;--fy:40%}
.cg-d11{grid-area:r2;--fx:55%;--fy:50%}

/* night: a cold multiply, brightest where the two faces meet; the grain is 01's own tile */
.cg::before,.cg::after{content:"";position:absolute;inset:0;pointer-events:none}
.cg::before{z-index:1;mix-blend-mode:multiply;background:radial-gradient(110% 95% at 50% 38%,#cfe0e6 0%,#9cb3bf 52%,#6a8292 100%)}
.cg::after{z-index:2;background:url(/media/bn-grain-f85a84.webp) 0 0/128px;mix-blend-mode:overlay;opacity:.5}
/* day: the same tiles under an overcast screen -- blacks lift to cold silver, nothing reads as a hole */
[data-theme="light"] .cg::before{mix-blend-mode:screen;background:radial-gradient(110% 95% at 50% 38%,#3c454e 0%,#56616b 55%,#76828d 100%)}
[data-theme="light"] .cg::after{opacity:.35}

/* the floodlights come on from the axis out, a mirrored pair at a time */
@keyframes cg-on{from{filter:brightness(.18)}}
.cg-d74>img,.cg-d80>img,.cg-d14>img,.cg-d50>img{animation-delay:.12s}
.cg-d47>img,.cg-d15>img,.cg-k53>img,.cg-d11>img{animation-delay:.24s}
@media (prefers-reduced-motion:reduce){.cg-t{animation:none}}

/* 01's fade, narrowed to the axis: the side tiles keep their feet; its last 40px thin out so the banner ends on the
   page colour itself, never on a darker band */
.bn--cg .bn-cap::before{--foot:linear-gradient(to top,transparent 4px,#000 44px);
  -webkit-mask-image:var(--foot),linear-gradient(to right,transparent 19%,#000 31%,#000 69%,transparent 81%);-webkit-mask-composite:source-in;
  mask-image:var(--foot),linear-gradient(to right,transparent 19%,#000 31%,#000 69%,transparent 81%);mask-composite:intersect}

/* ── upright: four columns, the faces the biggest band, the words over the last row ──────────────── */
@media (max-aspect-ratio:1/1){
  .bn--cg{--g:2px}
  .cg{grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:minmax(0,13fr) minmax(0,15fr) minmax(0,38fr) minmax(0,16fr) minmax(0,18fr);
    grid-template-areas:"l1 l1 r1 r1" "p1 p2 p3 p4" "fl fl fr fr" "l2 l2 r2 r2" ". . . ."}
  .cg-yan,.cg-d93{--fy:18%;-webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent);mask-image:linear-gradient(to bottom,#000 74%,transparent)}
  /* the last pair is a band behind the name only; the grey line and the cue stand on bare ground */
  .cg-k53,.cg-d11{-webkit-mask-image:linear-gradient(to bottom,transparent 8%,#000 45%,#000 62%,transparent);
    mask-image:linear-gradient(to bottom,transparent 8%,#000 45%,#000 62%,transparent)}
  .bn--cg .bn-logo{height:var(--plogo);min-height:72px}
  .bn--cg .bn-cap::before{-webkit-mask-image:var(--foot);mask-image:var(--foot)}
}
/* a short phone (a small iPhone under its URL bar): the name climbs into the faces' band, so the faces climb too */
@media (max-aspect-ratio:1/1) and (max-height:600px){
  .cg-yan,.cg-d93{--fy:80%}
}

/* ── the board ───────────────────────────────────────────────────────────────────────────────────── */
.bd-brand{--lk:40px}

.pm-fb::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;height:300px;background:linear-gradient(to top,var(--bg) 20px,color-mix(in srgb,var(--bg) 94%,transparent) 110px,color-mix(in srgb,var(--bg) 60%,transparent) 180px,transparent 300px)}
html:lang(en) .m1-w{display:flex;align-items:center;justify-content:center;gap:calc(16px - .3em);max-width:none;margin-top:6px;
  font:800 clamp(14px,1.25vw,18px)/1.35 var(--f);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--ink);text-wrap:balance}
html:lang(he) .m1-w{display:flex;align-items:center;justify-content:center;gap:16px;max-width:none;margin-top:6px;
  font:800 clamp(14px,1.25vw,18px)/1.35 var(--f);color:var(--ink);text-wrap:balance}
.m1-w[aria-current]::before,.m1-w[aria-current]::after{content:"";flex:none;width:40px;height:1px;background:var(--red)}
@media (max-width:1024px){.m1-w[aria-current]::before,.m1-w[aria-current]::after{width:24px}}
/* menu 03 Tagline (mockups/menu-sheet): every word in the home's tagline -- hero.css's English caps, he.css's Hebrew --
   on a row ruled in the site's 1px line, the current page between the tagline's own red side lines (style.css).
   build.py (MENU_LIFT) reads all three out of their sheets and re-selects them as .m1-w; the lifted type stands at
   (0,2,1), so what this sheet changes on a word it says at (0,3,0) or above. */

/* the whole sheet scrolls as one, its header with it, when a short screen cannot hold the words -- nothing slides under
   a pinned bar; centred whenever they fit */
.mnav.m1n.on{display:flex;flex-direction:column}
.m1n .mnav-hd,.m1n .ralrule{flex:none}
.m1n nav{display:flex;flex-direction:column;flex:1 0 auto;padding-inline:0}
.m1-l{gap:0;align-items:stretch;margin-block:auto}
/* the stagger: .06s a line in list order, one extra beat before the door, whatever the word count */
.m1-l li{animation:bn-in .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * .06s)}
.m1-l li:nth-child(2){--i:1}.m1-l li:nth-child(3){--i:2}.m1-l li:nth-child(4){--i:3}.m1-l li:nth-child(5){--i:4}
.m1-l li:nth-child(6){--i:5}.m1-l li:nth-child(7){--i:6}.m1-l li:nth-child(8){--i:7}.m1-l li:nth-child(9){--i:8}
.m1-l li:nth-child(10){--i:9}.m1-l li:nth-child(11){--i:10}.m1-l li:nth-child(12){--i:11}
.m1-l li:has(>.m1-az),.m1-l .m1-sr{animation-delay:calc((var(--i,0) + 1) * .06s)}
/* the rows: the tagline at its full 18px on every screen, each row the title plate's phone height (home.css .s2-p), a
   word that has to wrap (large text on a phone) centred line by line; where a word is the current page the others step
   back to the page's grey */
.m1-l li:has(>.m1-w){border-bottom:1px solid var(--line)}
.m1-l li:first-child{border-top:1px solid var(--line)}
.m1n .m1-l .m1-w{min-height:56px;margin:0;padding-inline:var(--gx);font-size:18px;text-align:center}
/* large text: the English tracking stops at the tagline's 18px value, 5.4px (3.5px under 360); the side lines' gap
   follows it */
html:lang(en) .m1n .m1-l .m1-w{--tr:min(.3em,5.4px);--g:calc(16px - var(--tr));letter-spacing:var(--tr);text-indent:var(--tr)}
@media (max-width:359px){
  html:lang(en) .m1n .m1-l .m1-w{--tr:min(.3em,3.5px)}
}
/* and once a word's type grows past 20px (text zoom; it is 18px everywhere), the current row drops its side lines and
   their gaps, and its ink alone marks it: (20px - 1em) * 999 is 0 at 20px and up, and past any line or gap below */
.m1n .m1-l .m1-w{gap:min(var(--g,16px),max(0px,(20px - 1em) * 999))}
.m1n .m1-l .m1-w[aria-current]::before,.m1n .m1-l .m1-w[aria-current]::after{max-width:max(0px,(20px - 1em) * 999)}
.m1n .m1-l:has([aria-current]) .m1-w:not([aria-current]){color:var(--dim)}
.m1-w:focus-visible{outline-offset:-2px}
/* the door and the search keep the page's side margin, at most 440 wide */
.m1-l li:has(>.m1-az),.m1-l .m1-sr{align-self:center;width:min(100% - 2 * var(--gx),440px)}
.m1-l .m1-az{width:100%;margin-top:20px}
.m1-l .m1-az{justify-content:center;gap:10px;padding-inline:16px;background:var(--panel);border:2px solid var(--red-ink);color:var(--red-ink)}
.m1-az .xa-i{flex:none;display:flex}
.m1-az .xa-i svg{width:20px;height:20px}
/* the header's search form, as wide as the door above it -- only where the header hides its own (up to 64em) */
.m1n .srch.m1-srch{display:grid;grid-template-columns:minmax(0,1fr) 48px;width:100%;margin-top:12px}
@media (hover:hover){
  .m1n .m1-l .m1-w:not([aria-current]):hover{color:var(--red-ink)}
  .m1-l .m1-az:hover{background:var(--red);color:#fff;outline:0}
}
/* from a tablet up the rows stand in a 640 column, the door and the search under them */
@media (min-width:768px){
  .m1-l{width:min(100% - 2 * var(--gx),640px);margin-inline:auto}
  .m1n .m1-l .m1-w{padding-inline:0}
  .m1-l li:has(>.m1-az),.m1-l .m1-sr{width:min(100%,440px)}
}
@media not all and (max-width:64em){
  .m1-l .m1-sr{display:none}
}
/* a short screen (a phone on its side): the lockup at the phone header's floor, 48; the rows in two ruled columns, the
   door and the search side by side under them */
@media (max-height:500px){
  .m1n{--lk:48px}
  .m1-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;width:min(100% - 2 * var(--gx),880px);margin-inline:auto}
  .m1n .m1-l .m1-w{padding-inline:0}
  .m1-l li:nth-child(2):has(>.m1-w){border-top:1px solid var(--line)}
  .m1-l li:has(>.m1-az),.m1-l .m1-sr{width:auto}
  .m1-l li:has(>.m1-az){grid-column:1}
  .m1n .m1-sr .m1-srch{margin-top:20px}
}

/* players 02 הרכב: all eleven in one line-up; the chosen one steps forward in colour. One index drives every track
   (players.js): each item carries its slot --k (its distance from the chosen one, round the circle, fractional while it
   moves), --a = min(1,|k|) and --r = a on the reading-start side of the axis. The fades are the home poster's (build.py
   PM_HERO), the names sharp names (sh()); the arrows and buttons are the page's own. */

.pl{position:relative;isolation:isolate;overflow:hidden}
.pl>*{position:relative;z-index:3}
.pl [data-only="m"]{display:none}

/* the caption: the name (build.py sh()), a grey line, the athlete's own sentence */
.pl .ps-cap{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;min-width:0}
.pl .ps-cap>*{max-width:100%}
.pl .ps-name{text-wrap:balance}
.pl .ps-sub{font:700 17px/1.4 var(--f);color:var(--dim);margin:0}
.pl .ps-sub:empty{display:none}
.pl .ps-q{max-width:32em;margin:4px 0 0;font:600 clamp(19px,1.45vw,23px)/1.5 var(--f);color:var(--ink);text-wrap:balance}
.pl .ps-more{margin-top:8px}
.pl .ps-more,.pl .car-arr{background:color-mix(in srgb,var(--panel) 80%,transparent)}
.pl .ps{visibility:hidden}
.pl .ps.on{visibility:visible}
.pl .ps.on .ps-cap>*{animation:bn-in .9s cubic-bezier(.2,.7,.2,1) both}
.pl .ps.on .ps-cap>:nth-child(2){animation-delay:.08s}
.pl .ps.on .ps-cap>:nth-child(3){animation-delay:.16s}
.pl .ps.on .ps-cap>:nth-child(4){animation-delay:.24s}

/* the slot and side are read only by the item they are set on: not inherited, a moving row restyles its items and
   leaves their photos and names alone (the colour, --a, still reaches them) */
@property --k{syntax:"<number>";inherits:false;initial-value:0}
@property --r{syntax:"<number>";inherits:false;initial-value:0}

/* every track is carried by a finger or the mouse: no text selection starts on it */
.p2-wall,.pa{touch-action:pan-y;-webkit-user-select:none;user-select:none}

/* ── desktop: the wall ───────────────────────────────────────────────────────────────────────────── */
@property --h{syntax:"<number>";inherits:true;initial-value:0}
.p2{--g:3px;--H:clamp(380px,100svh - 420px,640px);--A:calc(var(--H) * .708);--fs:clamp(40px,4.2vw,72px);padding-bottom:8px}
.p2 .pl-car{width:min(1520px,100% - 2 * var(--gx))}
.p2-wall{position:relative;height:var(--H);overflow:hidden;--s:calc((100% - var(--A) - 10 * var(--g)) / 10)}
/* the fade is the poster's own gradient, pressed to the wall's height */
.p2-wall.pm-fb::after{transform:scaleY(.62);transform-origin:50% 100%}
/* +k on the reading-end side of the axis (the next ones, in reading order), -k on the reading-start side; the chosen one's width morphs with |k|,
   so the row stays shut at every fraction of a step. A twin of each strip (players.js) stands eleven slots away: the
   one leaving an end is the one entering the other. */
.p2-s{--k:0;--a:0;--r:0;--h:0;position:absolute;top:0;height:100%;overflow:hidden;background:var(--card2);
  width:calc(var(--s) + (var(--A) - var(--s)) * (1 - var(--a)));
  inset-inline-end:calc(50% - var(--A) / 2 - var(--k) * (var(--s) + var(--g)) + var(--r) * (var(--A) - var(--s)));
  transition:--h .45s cubic-bezier(.2,.7,.2,1)}
.p2-s:focus-visible{outline-offset:-4px}
.p2-img{--x:calc(var(--a) * (1 - .8 * var(--h)));position:absolute;top:0;left:50%;width:var(--A);height:var(--H);max-width:none;
  object-fit:cover;object-position:50% 20%;transform:translateX(-50%) scale(calc(1 + .05 * var(--h)));will-change:transform;
  filter:grayscale(var(--x)) brightness(calc(1 - .38 * var(--x)))}
[data-theme="light"] .p2-img{filter:grayscale(var(--x)) brightness(calc(1 - .1 * var(--x))) contrast(calc(1 - .15 * var(--x)))}
/* the name under each face, on the ground the wall fades into: first name over surname, like a team sheet; above the
   caption's pool (z 4 > the foot's 3), which would otherwise wash the neighbours' names. It fades as its strip comes
   forward. */
.p2-n{position:absolute;bottom:44px;left:50%;z-index:4;width:min-content;text-align:center;overflow-wrap:normal;
  transform:translate(-50%,calc(-6px * var(--h)));opacity:var(--a);
  font:800 15px/1.2 var(--f);letter-spacing:.5px;color:var(--ink)}
.p2-foot{position:relative;z-index:3;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:start;column-gap:16px;
  margin-top:calc(-.62 * var(--fs))}
.p2 .pl-prev,.p2 .pl-next{margin-top:calc(.525 * var(--fs) - 24px)}
.p2-caps{display:grid;min-width:0}
.p2-caps>.ps{grid-area:1/1;min-width:0}

@media (hover:hover){
  .p2-s{cursor:pointer}
  .p2-s.on{cursor:grab}
  .pl.drag,.pl.drag *{cursor:grabbing!important}
  /* a strip under the mouse lifts: its colour comes up, the face leans in, the name rises -- not while the row moves */
  .pl:not(.mv) .p2-s:not(.on):hover{--h:1}
}

/* ── phones and tablets (the header's burger width) ─────────────────────────────────────────────────── */
@media (max-width:1024px){
  .pl [data-only="d"]{display:none}
  .pl [data-only="m"]{display:block}
  .pl .ps-q{font-size:17px}
  .p2{--fs:clamp(34px,10vw,44px)}
  .p2 .pl-car{width:100%}
  .p2 .ps-cap{padding-inline:var(--gx)}
  /* one height for all eleven captions (the tallest sets it): the name on top, the sentence in the middle, "read more"
     on the floor between the two arrows -- the whole band is one phone screen */
  .p2-foot{grid-template-columns:minmax(0,1fr)}
  .p2-caps>.ps{display:flex}
  .p2 .ps-cap{flex:1}
  .p2 .ps-q{margin-block:auto}
  .p2 .ps-more{margin-top:0}
  .p2 .pl-prev,.p2 .pl-next{position:absolute;bottom:0;z-index:1;margin:0}
  .p2 .pl-prev{inset-inline-start:var(--gx)}
  .p2 .pl-next{inset-inline-end:var(--gx)}

  /* the stage: a card per athlete, +k on the reading-end side of the axis (the next ones, in reading order); the chosen one in colour,
     the rest grey (the wall's own grade). Flat and square: only translate and scale move them. */
  .pa{position:relative;overflow:hidden;isolation:isolate;container-type:inline-size}
  .pa.pm-fb::after{z-index:60;transform:scaleY(.5);transform-origin:50% 100%}
  .pa-c{--k:0;--a:0;position:absolute;top:0;overflow:hidden;background:var(--card2)}
  .pa-c.far{visibility:hidden}
  .pa-c:focus-visible{outline-offset:-4px}
  .pa-img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;
    filter:grayscale(var(--a)) brightness(calc(1 - .38 * var(--a)))}
  [data-theme="light"] .pa-img{filter:grayscale(var(--a)) brightness(calc(1 - .1 * var(--a))) contrast(calc(1 - .15 * var(--a)))}

  /* A סרט: the chosen one on the axis in colour, a grey neighbour at each edge; the film moves under the finger. A card
     of scale --s sits --k steps off the axis with its reading-end edge at --x; its box is cut to the stage, so a neighbour's
     hit box is the part a finger can reach, and its photo stays where the whole card would put it. */
  .pa{--cw:min(64vw,max(100svh - 400px,220px) * .708);height:calc(var(--cw) / .708)}
  .pa-c{--s:calc(1 - .12 * var(--a));--x:calc(50cqw + var(--k) * (-.94 * var(--cw) - 12px) - var(--cw) * var(--s) / 2);
    inset-inline-end:max(0px,var(--x));width:max(0px,min(100cqw,var(--x) + var(--cw) * var(--s)) - max(0px,var(--x)));
    top:calc(50% - 50% * var(--s));height:calc(100% * var(--s))}
  .pa-img{position:absolute;top:0;inset-inline-end:min(0px,var(--x));width:calc(var(--cw) * var(--s));max-width:none}
}

.p2-s:nth-child(1),.pa-c:nth-child(1){--k:0;--a:0;--r:0}
.p2-s:nth-child(2),.pa-c:nth-child(2){--k:1;--a:1;--r:0}
.p2-s:nth-child(3),.pa-c:nth-child(3){--k:2;--a:1;--r:0}
.p2-s:nth-child(4),.pa-c:nth-child(4){--k:3;--a:1;--r:0}
.p2-s:nth-child(5),.pa-c:nth-child(5){--k:4;--a:1;--r:0}
.p2-s:nth-child(6),.pa-c:nth-child(6){--k:5;--a:1;--r:0}
.p2-s:nth-child(7),.pa-c:nth-child(7){--k:-5;--a:1;--r:1}
.p2-s:nth-child(8),.pa-c:nth-child(8){--k:-4;--a:1;--r:1}
.p2-s:nth-child(9),.pa-c:nth-child(9){--k:-3;--a:1;--r:1}
.p2-s:nth-child(10),.pa-c:nth-child(10){--k:-2;--a:1;--r:1}
.p2-s:nth-child(11),.pa-c:nth-child(11){--k:-1;--a:1;--r:1}
/* Ruled 2026-09-28: "02 titles with 01 about"; the titles' plate retired 2026-10-02.
   Titles: a sharp name (build.py sh()), with the titles' space under it.
   About (01 פלדה): two equal halves, the coach and the words. */
.ttl.s2{margin-bottom:48px}
.a1-box{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:var(--panel)}
.a1-img{position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--card2)}
.a1-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.a1-txt{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px clamp(32px,7%,80px);text-align:center}
.a1-txt p{max-width:24em;margin:0;text-wrap:balance}
.a1-txt p:first-child{font:600 21px/1.7 var(--f)}
.a1-txt p+p{margin-top:20px;font:400 18px/1.8 var(--f);color:var(--dim)}
.a1-txt .btn{margin-top:40px}
/* left to right, the words lead and the photo sits right, as in Hebrew: the coach points into the text */
@media not all and (max-width:767px){[dir=ltr] .a1-img{order:1}}

@media (max-width:767px){
  .ttl.s2{margin-bottom:32px}
  .a1-box{grid-template-columns:minmax(0,1fr)}
  .a1-txt{padding:32px 20px 36px}
  .a1-txt p:first-child{font-size:19px}
  .a1-txt p+p{font-size:17px;line-height:1.75}
  .a1-txt .btn{margin-top:28px}
}

:where(html:lang(en)) .sh-a{display:flex;align-items:center;justify-content:center;gap:calc(16px - .3em);max-width:none;margin-top:6px;
  font:800 clamp(14px,1.25vw,18px)/1.35 var(--f);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--ink);text-wrap:balance}
:where(html:lang(he)) .sh-a{display:flex;align-items:center;justify-content:center;gap:16px;max-width:none;margin-top:6px;
  font:800 clamp(14px,1.25vw,18px)/1.35 var(--f);color:var(--ink);text-wrap:balance}
.sh-a::before,.sh-a::after{content:"";flex:none;width:40px;height:1px;background:var(--red)}
@media (max-width:1024px){.sh-a::before,.sh-a::after{width:24px}}
.sh-a{min-height:56px;margin:0;padding-inline:var(--gx);font-size:18px;text-align:center}
html:lang(en) .sh-a{--tr:min(.3em,5.4px);--g:calc(16px - var(--tr));letter-spacing:var(--tr);text-indent:var(--tr)}
@media (max-width:359px){html:lang(en) .sh-a{--tr:min(.3em,3.5px)}}
.sh-a{gap:min(var(--g,16px),max(0px,(20px - 1em) * 999))}
.sh-a::before,.sh-a::after{max-width:max(0px,(20px - 1em) * 999)}
/* sharp A (build.py SHARP, sh()): the lifted row fitted to a name, in both languages.
   Each name on the site's title steps (--t: 36; 22 on a phone; 18 under 360, the row's own), or at its place's own
   size where that is bigger (--x): the banners' and players' --fs, the size their metal letters wore (hero.css .bn-h),
   the contact box's 22, the 404's 26 and a testimony card's 22 (style.css), the home's and About's titles' 28
   (home.css .ttl.s2, its phone size). Hebrew stands at
   1.1 times that (--o): at one size Heebo's letters stand 59 high to Assistant's capitals' 65. That size (--X) is the
   name's ceiling. A name its box cannot hold on one line gives way in turn: its size, row and all (letters, tracking,
   side lines), down to its floor (--F: 22px, 18px under 360; Hebrew 1.1 times) unless its place is smaller (--n); then
   its tracking, down to none (--tr); then it wraps between its units (sh()), balanced, its side lines beside the
   wrapped block. The side lines are always drawn. Its longest word (--ww) always fits the box beside them. site.js
   measures the name's untracked width in em (--wn), its count of letter gaps (--kn) and its longest word in em (--ww);
   the names of one set share the set's largest of each, so they stand in one size and one tracking. The menu row's own
   numbers, as the testimony reader wears them: English tracking 5.4px (3.5px under 360px), side lines 40px (24px up to
   1024px), 16px between a line and the letters, and the large-text drop past the name's size: at text zoom (--z1, 1em,
   is zoomed; --n is not) the side lines and the tracking drop and the letters step down until the longest word fits
   the box, never under the body text's 17px; the players' arrows level with the row */
@property --z1{syntax:"<length>";inherits:true;initial-value:0px}
:where(html:lang(he)){--o:1.1}
.sh-a{--t:36px;--x:var(--t);--X:calc(var(--o,1) * var(--x));--F:22px;--T:0px;--S:40px;--g:16px;--z1:1em;font-size:var(--n);gap:0;
  padding-inline:0;overflow-wrap:break-word}
.sh-p{display:inline-block;max-width:100%}
:has(>.sh-a){min-width:0;max-width:100%}
:is(.hero-cap h1,.ps-name)>.sh-a{--x:max(var(--fs),var(--t))}
.ct-h>.sh-a{--x:max(22px,var(--t))}
.tc-name>.sh-a{--x:22px}
.ttl>.sh-a{--x:max(26px,var(--t))}
.ttl.s2>.sh-a{--x:max(28px,var(--t))}
.sh-a{--n:min(clamp(min(var(--o,1) * var(--F),var(--X)),(100cqi - 32px) / (var(--wn,0) + tan(atan2(var(--kn,0) * var(--T) + 2 * var(--S),var(--X)))),var(--X)),
    (100cqi - 32px) / (var(--ww,0) + tan(atan2(2 * var(--S),var(--X)))));
  --s:tan(atan2(var(--n),var(--X)))}
:is(.ps-cap,.hero-cap,.tc-name,.ct-h,.ttl):has(.sh-a){container-type:inline-size}
.hero-cap{width:100%}
.ct-txt .ct-h{align-self:stretch}
@media (max-width:1024px){
  .sh-a{--S:24px}
}
@media (max-width:767px){
  .sh-a{--t:22px}
}
@media (max-width:359px){
  .sh-a{--t:18px;--F:18px}
}
/* a short screen (a phone on its side, a laptop at 200%) keeps the banner's name on it: the photo leaves 240px of the
   screen to the head and the name, as the testimony reader's does (mockups/testimony-reader SPEC 2.2) */
.hero-pic{max-height:calc(100svh - 240px)}
.sh-a::before,.sh-a::after{flex:none;box-sizing:content-box;width:calc(var(--S) * var(--s));max-width:max(0px,(var(--n) + 2px - 1em) * 999);
  background:var(--red) content-box}
.sh-a::before{padding-inline-end:min(var(--g),max(0px,(var(--n) + 2px - 1em) * 999))}
.sh-a::after{padding-inline-start:min(var(--g),max(0px,(var(--n) + 2px - 1em) * 999))}
.sh-a>span{flex:0 1 auto;max-width:100%;text-indent:0;text-wrap:balance;hyphens:auto;
  padding-inline-start:min(var(--tr,0px),max(0px,(var(--n) + 2px - var(--z1)) * 999));
  font-size:clamp(17px,(100cqi - 2 * min(var(--S) * var(--s) + 16px,max(0px,(var(--n) + 2px - var(--z1)) * 999))) / var(--ww,1) * tan(atan2(var(--n),var(--z1))),var(--n))}
/* English tracking; at the size floor it gives way, down to none, before the name wraps */
html:lang(en) .sh-a{--T:5.4px;--tr:max(0px,min(var(--T) * var(--s),(100cqi - 32px - var(--n) * var(--wn,0) - 2 * var(--S) * var(--s)) / var(--kn,1)));
  --g:calc(16px - var(--tr));letter-spacing:min(var(--tr),max(0px,(var(--n) + 2px - 1em) * 999))}
@media (max-width:359px){html:lang(en) .sh-a{--T:3.5px}}
@media not all and (max-width:1024px){.p2 .pl-prev,.p2 .pl-next{margin-top:calc(max(56px,1.35 * var(--o,1) * max(var(--fs),36px)) / 2 - 24px)}}