/* 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. */
@font-face{font-family:"Assistant";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/assistant-hebrew.f9805e7a.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:"Assistant";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/assistant-latin.26b77cc3.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}

: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::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 1024px the phone row (.hdr-in) stands alone. */
.hdr:not(.xs-on) .xs-f{display:none}
@media (max-width:1024px){
  .hdr .xs-b,.hdr .xd,.hdr .xs-f{display:none}
}
@media not all and (max-width:1024px){
  .hdr .hdr-in{display:none}
  .hdr .xd{width:var(--w);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 words stand in the foot of its photo as the home poster's name stands in the collage: the letters, their red
   glow and mist, the shadow pool and the rise are the home's own rules, re-selected out of hero.css where the marker
   stands (build.py BLEND). Below it, only the fit to a strip: the photo's foot dissolves into the page on the home's
   curve, scaled to the strip, and the words climb one line into it. */
.hero{--bx:max(var(--gx),3vw);--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"] .hero{--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)}
.hero-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)}
.hero-t{position:relative;z-index:0;font:800 var(--fs)/1.05 var(--f);margin:0}
.hero-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))}
.hero-t::before,.hero-t::after{content:"";position:absolute;pointer-events:none}
.hero-t::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)}
.hero-t::after{z-index:1;left:-6%;right:-6%;bottom:-.04em;height:.36em;background:radial-gradient(farthest-side at 50% 100%,var(--haze),transparent)}
[data-theme="light"] .hero .hero-tag{color:var(--ink1)}
@keyframes bn-in{from{opacity:0;transform:translateY(14px)}}
.hero-cap>*,.hero>.hero-tag{animation:bn-in .9s cubic-bezier(.2,.7,.2,1) both}
.hero>.hero-tag{animation-delay:.1s}
.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}
/* the home's caption is the width of the screen, a section's is the width of its words: the pool is held to the words and
   thins out at its sides and its last 40px, and no layer reaches the screen's edge, so the page beside the title stays the page */
.hero-cap::before{left:-25%;right:-25%;
  -webkit-mask-image:linear-gradient(to top,transparent 4px,#000 44px),linear-gradient(to right,transparent,#000 20% 80%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to top,transparent 4px,#000 44px),linear-gradient(to right,transparent,#000 20% 80%,transparent);mask-composite:intersect}
.hero-cap::before,.hero-t::before,.hero-t::after{max-width:calc(100vw - 2 * var(--gx));margin-inline:auto}
.hero-l{text-wrap:balance}
.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}
.ttl::after,.tc-name::after,.td-name::after,.ct-h::after{content:"";display:block;width:48px;height:4px;background:var(--red);margin:14px auto 0}
.panel .ttl,.tc-name,.ct-h{text-align:start}
.panel .ttl::after,.tc-name::after,.ct-h::after{margin-inline:0}
.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{text-align:center;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-name::after{margin-top:10px}
.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-name::after{margin-top:10px}
.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-txt .ct-h::after{margin-inline:auto}
.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:var(--w);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) */
.f-nav{display:flex;align-items:center;width:min(459px,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:hover{box-shadow:var(--glow)}
  .btn-2:hover{box-shadow:none;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{box-shadow:var(--glow)}
  .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:1024px){
  .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}
  html:lang(en) .bn-tag{gap:12px}
}
@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)}

/* 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{--bx:max(var(--gx),3vw);--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"] .pm{--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)}
.pm-h{position:relative;z-index:0;font:800 var(--fs)/1.05 var(--f);margin:0}
.pm-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))}
.pm-h::before,.pm-h::after{content:"";position:absolute;pointer-events:none}
.pm-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)}
.pm-h::after{z-index:1;left:-6%;right:-6%;bottom:-.04em;height:.36em;background:radial-gradient(farthest-side at 50% 100%,var(--haze),transparent)}
.pm-cap{position:relative;isolation:isolate}
.pm-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)}
.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)}
.pl .pm-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}
/* menu 01 מסילה: the menu sheet's five words stand in the poster's metal over the home collage, the athlete zone the one
   red box. The letters, glow, mist and pool are lift.css; the collage is cg.css / page.css. */

.m1n .m1-cg{position:fixed;inset:0;z-index:0}
.m1-scrim{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 40%,transparent),color-mix(in srgb,var(--bg) 74%,transparent) 30%,
    color-mix(in srgb,var(--bg) 74%,transparent) 76%,color-mix(in srgb,var(--bg) 40%,transparent))}
.m1n .mnav-hd,.m1n .ralrule,.m1n nav{position:relative;z-index:2}
/* 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;justify-content:center;flex:1 0 auto}
.m1-l{gap:0;margin-block:auto}
/* the stagger: .06s a line in list order, one extra beat before the athlete zone, whatever the word count */
.m1-l li{width:min(100%,360px);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)}
.m1-w{--fs:40px;display:flex;align-items:center;justify-content:center;min-height:64px}
.m1-w .pm-h{display:block}
/* the other four words stand dimmed, their red line off; the mouse brightens one, on the link itself */
.m1-w:not([aria-current]){--m1o:.78;--m1g:0}
.m1-w .pm-l{opacity:var(--m1o,1)}
.m1-w .pm-h::before{opacity:var(--m1g,1)}
.m1-w:not([aria-current]) .pm-h::before{transition:opacity .2s}
.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 athlete zone above it -- only where the header hides its own (up to 1024px) */
.m1n .srch.m1-srch{display:grid;grid-template-columns:minmax(0,1fr) 48px;width:100%;margin-top:12px}
.m1-w:focus-visible{outline-offset:-2px}
@media (hover:hover){
  .m1-w:hover{--m1o:1;--m1g:.7}
  .m1-l .m1-az:hover{background:var(--red);color:#fff;box-shadow:none}
}
/* the home's menu square opens the same sheet on a desktop: larger words, a wider column, and no search line -- the
   header carries the search at this width */
@media not all and (max-width:1024px){
  .m1-l li{width:min(100%,440px)}
  .m1-l .m1-sr{display:none}
  .m1-w{--fs:clamp(40px,5.2svh,60px);min-height:calc(var(--fs) * 1.25 + 12px)}
}
/* a short screen (a phone on its side): the sheet's lockup at the phone header's own floor, 48 */
@media (max-height:500px){
  .m1n{--lk:48px}
}